From 98992f9f36551178084624b1f698c539811d4c5b Mon Sep 17 00:00:00 2001
From: Bruno Ramos <37979213+Kuriel23@users.noreply.github.com>
Date: Sun, 12 Jul 2026 00:17:01 +0100
Subject: [PATCH 1/5] feat: enhance details page layout and add review
 functionality

---
 bun.lock                                      |   1 +
 .../pages/details/details-page-layout.tsx     |   4 +-
 src/components/ui/image-zoom.tsx              |   4 +-
 src/routes/anime/$slug.tsx                    | 492 +++++++------
 src/routes/book/$slug.tsx                     | 373 +++++-----
 src/routes/game/$slug.tsx                     | 412 ++++++-----
 src/routes/manga/$slug.tsx                    | 357 ++++-----
 src/routes/movie/$slug.tsx                    | 497 +++++++------
 src/routes/tv/$slug.tsx                       | 675 +++++++++---------
 9 files changed, 1488 insertions(+), 1327 deletions(-)

diff --git a/bun.lock b/bun.lock
index 7da5571..63a8913 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "trackverse",
diff --git a/src/components/pages/details/details-page-layout.tsx b/src/components/pages/details/details-page-layout.tsx
index 5c535f6..b5af5a5 100644
--- a/src/components/pages/details/details-page-layout.tsx
+++ b/src/components/pages/details/details-page-layout.tsx
@@ -8,8 +8,8 @@ interface DetailsPageLayoutProps {
 
 export function DetailsPageLayout({ sidebar, children }: DetailsPageLayoutProps) {
   return (
-    <div className="flex flex-col lg:flex-row gap-8">
-      <div className="lg:w-1/3">
+    <div className="flex flex-col lg:flex-row gap-8 mb-4 items-start">
+      <div className="lg:w-1/3 lg:sticky lg:top-4">
         <Card>
           <CardContent className="flex flex-col gap-4">{sidebar}</CardContent>
         </Card>
diff --git a/src/components/ui/image-zoom.tsx b/src/components/ui/image-zoom.tsx
index 3bf8e9d..b228682 100644
--- a/src/components/ui/image-zoom.tsx
+++ b/src/components/ui/image-zoom.tsx
@@ -30,11 +30,11 @@ export const ImageZoom = ({ className, backdropClassName, ...props }: ImageZoomP
       classDialog={cn(
         "[&::backdrop]:hidden",
         "[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0",
-        "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all",
+        "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all [&_[data-rmiz-modal-overlay]]:duration-300 [&_[data-rmiz-modal-overlay]]:ease-out",
         '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',
         '**:data-[rmiz-modal-overlay="visible"]:bg-transparent! [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',
         "[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full",
-        "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform",
+        "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform [&_[data-rmiz-modal-img]]:duration-300 [&_[data-rmiz-modal-img]]:ease-out",
         "motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none",
         backdropClassName,
       )}
diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index 5353b1c..c96e51b 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -22,6 +22,8 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
 import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { EpisodicContentModal } from "@/components/shared/modals/episodic-content";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -54,6 +56,7 @@ function AnimeDetailsRoute() {
   const { slug } = Route.useParams();
   const { anime: loaderAnime } = Route.useLoaderData();
   const { t } = useTranslation();
+  const [moreOpen, setMoreOpen] = useState(false);
   const [mySeason, _setMySeason] = useState<SingleSeasonData>({
     totalEpisodes: 12,
     watchedEpisodes: [1, 2, 3, 4, 5],
@@ -160,6 +163,8 @@ function AnimeDetailsRoute() {
             subtitle={anime.season && anime.year ? `${anime.season} ${anime.year}` : undefined}
             description={anime.synopsis}
             triggerLabel={t("library:moreOptions")}
+            open={moreOpen}
+            onOpenChange={setMoreOpen}
           >
             <EpisodicContentModal />
           </MoreOptionsDialog>
@@ -264,253 +269,272 @@ function AnimeDetailsRoute() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {anime.title}
-      </h1>
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {anime.title}
+        </h1>
 
-      <div className="flex flex-wrap items-center gap-6 border-b border-border pb-5">
-        {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-          <div className="flex items-center gap-2">
-            <div className="flex">
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+        <div className="flex flex-wrap items-center gap-6 border-b border-border pb-5">
+          {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+              </div>
+              <span className="font-semibold text-card-foreground">{rating}</span>
+              <span className="text-muted-foreground">
+                ({reviews.total} {t("library:reviews")})
+              </span>
             </div>
-            <span className="font-semibold text-card-foreground">{rating}</span>
-            <span className="text-muted-foreground">
-              ({reviews.total} {t("library:reviews")})
-            </span>
-          </div>
-        )}
-      </div>
-
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-            <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
-            {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
-              <TabsTrigger value="episodes">{t("library:episode_other")}</TabsTrigger>
-            )}
-            <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
-            <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-            {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-              <TabsTrigger value="reviews" className="capitalize">
-                {t("library:reviews")} ({reviews.total})
-              </TabsTrigger>
-            )}
-            <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
-          </TabsList>
+          )}
         </div>
-        <TabsContent value="info" className="space-y-5">
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <GenrePills genres={anime.genres} getLabel={(g) => getGenreLabel(t, g)} />
-          </div>
-
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <p className="text-muted-foreground leading-relaxed">{anime.synopsis}</p>
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:animeCharacteristics")}</h3>
-            <Grid minColSize={"200px"} className="gap-4">
-              {anime.type && (
-                <DetailsCard
-                  title={t("library:type")}
-                  icon={<Icon icon={"lucide:file-pen-line"} className="size-5 text-muted-foreground" />}
-                  description={anime.type}
-                />
-              )}
-              {anime.source && (
-                <DetailsCard
-                  title={t("library:source")}
-                  icon={<Icon icon={"lucide:hash"} className="size-5 text-muted-foreground" />}
-                  description={anime.source}
-                />
-              )}
-              {anime.numberOfEpisodes && (
-                <DetailsCard
-                  title={t("library:totalEpisodes")}
-                  icon={<Icon icon={"lucide:tv"} className="size-5 text-muted-foreground" />}
-                  description={anime.numberOfEpisodes}
-                />
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
+              <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
+              {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
+                <TabsTrigger value="episodes">{t("library:episode_other")}</TabsTrigger>
               )}
-              {anime.broadcast.string && (
-                <DetailsCard
-                  title={t("library:broadcast")}
-                  icon={<Icon icon={"lucide:antenna"} className="size-5 text-muted-foreground" />}
-                  description={anime.broadcast.string}
-                />
-              )}
-              {anime.rating && (
-                <DetailsCard
-                  title={t("library:rating")}
-                  icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
-                  description={anime.rating}
-                />
-              )}
-              {anime.duration && (
-                <DetailsCard
-                  title={t("library:runtime")}
-                  icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
-                  description={anime.duration}
-                />
-              )}
-              {anime.studios.length >= 1 && (
-                <DetailsCard
-                  title={t("library:studios")}
-                  icon={<Icon icon={"lucide:building-2"} className="size-5 text-muted-foreground" />}
-                  description={anime.studios.map((st: { name: string; malId: number }, index: number) => (
-                    <Link to="/" key={st.malId} search={{ landing: "true" }}>
-                      {st.name}
-                      {index < anime.studios.length - 1 && ", "}
-                    </Link>
-                  ))}
-                />
-              )}
-              {anime.producers.length >= 1 && (
-                <DetailsCard
-                  title={t("library:producers")}
-                  icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
-                  description={anime.producers.map((pd: { name: string; malId: number }, index: number) => (
-                    <Link to="/" key={pd.malId} search={{ landing: "true" }}>
-                      {pd.name}
-                      {index < anime.producers.length - 1 && ", "}
-                    </Link>
-                  ))}
-                />
-              )}
-            </Grid>
+              <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
+              <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+            </TabsList>
           </div>
+          <TabsContent value="info" className="space-y-5">
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{anime.synopsis}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <GenrePills genres={anime.genres} getLabel={(g) => getGenreLabel(t, g)} />
+            </div>
 
-          {isAuthenticated && <AnimeEpisodeProgress season={mySeason} onToggle={handleToggle} />}
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:animeCharacteristics")}</h3>
+              <Grid minColSize={"200px"} className="gap-4">
+                {anime.type && (
+                  <DetailsCard
+                    title={t("library:type")}
+                    icon={<Icon icon={"lucide:file-pen-line"} className="size-5 text-muted-foreground" />}
+                    description={anime.type}
+                  />
+                )}
+                {anime.source && (
+                  <DetailsCard
+                    title={t("library:source")}
+                    icon={<Icon icon={"lucide:hash"} className="size-5 text-muted-foreground" />}
+                    description={anime.source}
+                  />
+                )}
+                {anime.numberOfEpisodes && (
+                  <DetailsCard
+                    title={t("library:totalEpisodes")}
+                    icon={<Icon icon={"lucide:tv"} className="size-5 text-muted-foreground" />}
+                    description={anime.numberOfEpisodes}
+                  />
+                )}
+                {anime.broadcast.string && (
+                  <DetailsCard
+                    title={t("library:broadcast")}
+                    icon={<Icon icon={"lucide:antenna"} className="size-5 text-muted-foreground" />}
+                    description={anime.broadcast.string}
+                  />
+                )}
+                {anime.rating && (
+                  <DetailsCard
+                    title={t("library:rating")}
+                    icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
+                    description={anime.rating}
+                  />
+                )}
+                {anime.duration && (
+                  <DetailsCard
+                    title={t("library:runtime")}
+                    icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
+                    description={anime.duration}
+                  />
+                )}
+                {anime.studios.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:studios")}
+                    icon={<Icon icon={"lucide:building-2"} className="size-5 text-muted-foreground" />}
+                    description={anime.studios.map((st: { name: string; malId: number }, index: number) => (
+                      <Link to="/" key={st.malId} search={{ landing: "true" }}>
+                        {st.name}
+                        {index < anime.studios.length - 1 && ", "}
+                      </Link>
+                    ))}
+                  />
+                )}
+                {anime.producers.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:producers")}
+                    icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
+                    description={anime.producers.map((pd: { name: string; malId: number }, index: number) => (
+                      <Link to="/" key={pd.malId} search={{ landing: "true" }}>
+                        {pd.name}
+                        {index < anime.producers.length - 1 && ", "}
+                      </Link>
+                    ))}
+                  />
+                )}
+              </Grid>
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <CommunityStats
-              stats={[
-                { label: t("feed:lists.planning"), icon: "lucide:bookmark", iconClass: "text-purple-400", value: "5%" },
-                {
-                  label: t("feed:lists.watching"),
-                  icon: "lucide:tv-minimal-play",
-                  iconClass: "text-chart-1",
-                  value: "15%",
-                },
-                {
-                  label: t("feed:lists.completed"),
-                  icon: "lucide:check-circle",
-                  iconClass: "text-secondary",
-                  value: "72%",
-                },
-                { label: t("feed:lists.dropped"), icon: "lucide:x-circle", iconClass: "text-destructive", value: "8%" },
-              ]}
-            />
-          </div>
+            {isAuthenticated && <AnimeEpisodeProgress season={mySeason} onToggle={handleToggle} />}
+
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <CommunityStats
+                stats={[
+                  {
+                    label: t("feed:lists.planning"),
+                    icon: "lucide:bookmark",
+                    iconClass: "text-purple-400",
+                    value: "5%",
+                  },
+                  {
+                    label: t("feed:lists.watching"),
+                    icon: "lucide:tv-minimal-play",
+                    iconClass: "text-chart-1",
+                    value: "15%",
+                  },
+                  {
+                    label: t("feed:lists.completed"),
+                    icon: "lucide:check-circle",
+                    iconClass: "text-secondary",
+                    value: "72%",
+                  },
+                  {
+                    label: t("feed:lists.dropped"),
+                    icon: "lucide:x-circle",
+                    iconClass: "text-destructive",
+                    value: "8%",
+                  },
+                ]}
+              />
+            </div>
 
-          {anime.trailer.embedUrl && (
-            <iframe
-              src={anime.trailer.embedUrl.replace("&autoplay=1", "")}
-              allowFullScreen
-              className="w-full aspect-video"
-              title="Trailer"
-            />
+            {anime.trailer.embedUrl && (
+              <iframe
+                src={anime.trailer.embedUrl.replace("&autoplay=1", "")}
+                allowFullScreen
+                className="w-full aspect-video"
+                title="Trailer"
+              />
+            )}
+          </TabsContent>
+          {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
+            <TabsContent value="episodes">
+              <Grid minColSize={"200px"} className="gap-4">
+                {episodes
+                  .sort((a: { malId: number }, b: { malId: number }) => a.malId - b.malId)
+                  .map((episode: { malId: number; title: string; imageUrl: string }) => (
+                    <EpisodeItem
+                      key={episode.malId}
+                      title={episode.title}
+                      number={episode.malId}
+                      imageURL={episode.imageUrl.replace(
+                        "https://myanimelist.net/images/icon-banned-youtube.png",
+                        "/placeholder/banner-1.webp",
+                      )}
+                    />
+                  ))}
+              </Grid>
+            </TabsContent>
           )}
-        </TabsContent>
-        {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
-          <TabsContent value="episodes">
-            <Grid minColSize={"200px"} className="gap-4">
-              {episodes
-                .sort((a: { malId: number }, b: { malId: number }) => a.malId - b.malId)
-                .map((episode: { malId: number; title: string; imageUrl: string }) => (
-                  <EpisodeItem
-                    key={episode.malId}
-                    title={episode.title}
-                    number={episode.malId}
-                    imageURL={episode.imageUrl.replace(
-                      "https://myanimelist.net/images/icon-banned-youtube.png",
-                      "/placeholder/banner-1.webp",
-                    )}
-                  />
-                ))}
+          <TabsContent value="relations">
+            <Relations nodes={[]} edges={[]} />
+          </TabsContent>
+          <TabsContent value="lists">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <ListItem
+                list={
+                  {
+                    _count: { listItems: 0 },
+                    listItems: [],
+                    name: "",
+                    user: { name: "", profile: null },
+                  } as unknown as ApiTypes.ListWithPreview
+                }
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="cast">
+            <Grid minColSize={"150px"} className="gap-4">
+              {anime.cast?.map((cast: { role: string; name: string; imageUrl: string; positions: string[] }) => (
+                <CastItem
+                  key={cast.role}
+                  name={cast.name}
+                  character={cast.positions.map((positions) => positions).join(", ") as string}
+                  imageUrl={cast.imageUrl.replace(
+                    "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
+                    "",
+                  )}
+                />
+              ))}
             </Grid>
           </TabsContent>
-        )}
-        <TabsContent value="relations">
-          <Relations nodes={[]} edges={[]} />
-        </TabsContent>
-        {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-          <TabsContent value="reviews">
-            <ReviewItem
-              user={
-                {
-                  name: "John Doe",
-                  avatarURL: "https://assets.hardcover.app/editions/30399846/4434002844651.jpg",
-                  slug: "john-doe",
-                } as unknown as ApiTypes.User
-              }
-              reviewText={
-                "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
-              }
-              criteries={{
-                language: 5,
-                characters: 4,
-                all: 10,
-                story: 8,
-                theme: 9,
-              }}
-              date={new Date("2023-06-19")}
-            />
+          <TabsContent value="characters">
+            <Grid minColSize={"150px"} className="gap-4">
+              {anime.characters?.map((character: { name: string; imageUrl: string }) => (
+                <CharacterItem
+                  key={character.name}
+                  name={character.name}
+                  imageUrl={character.imageUrl.replace(
+                    "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
+                    "",
+                  )}
+                />
+              ))}
+            </Grid>
           </TabsContent>
+        </Tabs>
+      </DetailsPageLayout>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews?.total ?? 0})
+          </h3>
+          {isAuthenticated && (
+            <Button variant="outline" size="sm" className="shrink-0 gap-2" onClick={() => setMoreOpen(true)}>
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
+          )}
+        </div>
+        {!reviewsQuery.isLoading && !reviewsQuery.isError && (reviews?.total ?? 0) >= 1 ? (
+          <ReviewItem
+            user={
+              {
+                name: "John Doe",
+                avatarURL: "https://assets.hardcover.app/editions/30399846/4434002844651.jpg",
+                slug: "john-doe",
+              } as unknown as ApiTypes.User
+            }
+            reviewText={
+              "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
+            }
+            criteries={{ language: 5, characters: 4, all: 10, story: 8, theme: 9 }}
+            date={new Date("2023-06-19")}
+          />
+        ) : (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         )}
-        <TabsContent value="lists">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <ListItem
-              list={
-                {
-                  _count: { listItems: 0 },
-                  listItems: [],
-                  name: "",
-                  user: { name: "", profile: null },
-                } as unknown as ApiTypes.ListWithPreview
-              }
-            />
-          </div>
-        </TabsContent>
-        <TabsContent value="cast">
-          <Grid minColSize={"150px"} className="gap-4">
-            {anime.cast?.map((cast: { role: string; name: string; imageUrl: string; positions: string[] }) => (
-              <CastItem
-                key={cast.role}
-                name={cast.name}
-                character={cast.positions.map((positions) => positions).join(", ") as string}
-                imageUrl={cast.imageUrl.replace(
-                  "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
-                  "",
-                )}
-              />
-            ))}
-          </Grid>
-        </TabsContent>
-        <TabsContent value="characters">
-          <Grid minColSize={"150px"} className="gap-4">
-            {anime.characters?.map((character: { name: string; imageUrl: string }) => (
-              <CharacterItem
-                key={character.name}
-                name={character.name}
-                imageUrl={character.imageUrl.replace(
-                  "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
-                  "",
-                )}
-              />
-            ))}
-          </Grid>
-        </TabsContent>
-      </Tabs>
-    </DetailsPageLayout>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/book/$slug.tsx b/src/routes/book/$slug.tsx
index c8dd42b..54d8572 100644
--- a/src/routes/book/$slug.tsx
+++ b/src/routes/book/$slug.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@iconify/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Grid } from "@/components/layouts/grid.tsx";
@@ -16,6 +17,8 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
 import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { BookModal } from "@/components/shared/modals/book";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -81,6 +84,7 @@ function BookDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const [moreOpen, setMoreOpen] = useState(false);
   if (isLoading || reviewsData.isLoading) return <LoadingDetails />;
   if (isError || reviewsData.isError || !book) return <ErrorComponent />;
 
@@ -132,6 +136,8 @@ function BookDetailsRoute() {
             subtitle={String(book.releaseYear)}
             description={book.description}
             triggerLabel={t("library:moreOptions")}
+            open={moreOpen}
+            onOpenChange={setMoreOpen}
           >
             <BookModal />
           </MoreOptionsDialog>
@@ -159,192 +165,211 @@ function BookDetailsRoute() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {book.title}
-      </h1>
-      <div className="flex items-center gap-2">
-        <Icon icon={"lucide:user"} className="size-5 text-muted-foreground" />
-        {book.contributions.map((contribution: { author: { id: string; name: string } }, index: number) => (
-          <span key={contribution.author.id}>
-            <Link to={`/`} search={{ landing: "true" }} className="text-xl text-muted-foreground">
-              {contribution.author.name}
-            </Link>
-            {index < book.contributions.length - 1 && ", "}
-          </span>
-        ))}
-      </div>
-      <div className="flex items-center gap-2">
-        <Icon icon={"lucide:book-copy"} className="size-5 text-muted-foreground" />
-        <Link to={"/"} search={{ landing: "true" }} className="text-xl text-muted-foreground">
-          series_names (can be hidden if not exists)
-        </Link>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-6 pb-5 border-b border-border">
-        {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
-          <div className="flex items-center gap-2">
-            <div className="flex">
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
-            </div>
-            <span className="font-semibold text-card-foreground">{rating}</span>
-            <span className="text-muted-foreground">
-              ({reviews.total} {t("library:reviews")})
-            </span>
-          </div>
-        )}
-
-        {book.numberOfPages && (
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Icon icon={"lucide:bar-chart-3"} className="size-5" />
-            <span>
-              {t("library:medium")}: {Math.round(book.numberOfPages / 29)} {t("library:days")}
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {book.title}
+        </h1>
+        <div className="flex items-center gap-2">
+          <Icon icon={"lucide:user"} className="size-5 text-muted-foreground" />
+          {book.contributions.map((contribution: { author: { id: string; name: string } }, index: number) => (
+            <span key={contribution.author.id}>
+              <Link to={`/`} search={{ landing: "true" }} className="text-xl text-muted-foreground">
+                {contribution.author.name}
+              </Link>
+              {index < book.contributions.length - 1 && ", "}
             </span>
-          </div>
-        )}
-      </div>
-
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-            {reviews.total >= 1 && (
-              <TabsTrigger value="reviews" className="capitalize">
-                {t("library:reviews")} ({reviews.total})
-              </TabsTrigger>
-            )}
-            <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
-          </TabsList>
+          ))}
         </div>
-        <TabsContent value="info" className="space-y-5">
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <div className="flex flex-wrap gap-2">
-              <span className="px-3 py-1.5 bg-linear-to-r from-chart-1/20 to-chart-1/30 text-chart-1 border border-chart-1/30 rounded-full text-sm font-medium">
-                Fantasia
-              </span>
-              <span className="px-3 py-1.5 bg-linear-to-r from-purple-500/20 to-purple-500/30 text-purple-400 border border-purple-500/30 rounded-full text-sm font-medium">
-                Aventura
-              </span>
-              <span className="px-3 py-1.5 bg-linear-to-r from-chart-3/20 to-chart-3/30 text-chart-3 border border-chart-3/30 rounded-full text-sm font-medium">
-                Épico
-              </span>
-              <span className="px-3 py-1.5 bg-linear-to-r from-primary/20 to-primary/30 text-primary border border-primary/30 rounded-full text-sm font-medium">
-                Magia
+        <div className="flex items-center gap-2">
+          <Icon icon={"lucide:book-copy"} className="size-5 text-muted-foreground" />
+          <Link to={"/"} search={{ landing: "true" }} className="text-xl text-muted-foreground">
+            series_names (can be hidden if not exists)
+          </Link>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-6 pb-5 border-b border-border">
+          {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+              </div>
+              <span className="font-semibold text-card-foreground">{rating}</span>
+              <span className="text-muted-foreground">
+                ({reviews.total} {t("library:reviews")})
               </span>
-              <span className="px-3 py-1.5 bg-linear-to-r from-chart-4/20 to-chart-4/30 text-chart-4 border border-chart-4/30 rounded-full text-sm font-medium">
-                Drama
+            </div>
+          )}
+
+          {book.numberOfPages && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Icon icon={"lucide:bar-chart-3"} className="size-5" />
+              <span>
+                {t("library:medium")}: {Math.round(book.numberOfPages / 29)} {t("library:days")}
               </span>
             </div>
-          </div>
+          )}
+        </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <p className="text-muted-foreground leading-relaxed">{book.description}</p>
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+            </TabsList>
           </div>
+          <TabsContent value="info" className="space-y-5">
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{book.description}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <div className="flex flex-wrap gap-2">
+                <span className="px-3 py-1.5 bg-linear-to-r from-chart-1/20 to-chart-1/30 text-chart-1 border border-chart-1/30 rounded-full text-sm font-medium">
+                  Fantasia
+                </span>
+                <span className="px-3 py-1.5 bg-linear-to-r from-purple-500/20 to-purple-500/30 text-purple-400 border border-purple-500/30 rounded-full text-sm font-medium">
+                  Aventura
+                </span>
+                <span className="px-3 py-1.5 bg-linear-to-r from-chart-3/20 to-chart-3/30 text-chart-3 border border-chart-3/30 rounded-full text-sm font-medium">
+                  Épico
+                </span>
+                <span className="px-3 py-1.5 bg-linear-to-r from-primary/20 to-primary/30 text-primary border border-primary/30 rounded-full text-sm font-medium">
+                  Magia
+                </span>
+                <span className="px-3 py-1.5 bg-linear-to-r from-chart-4/20 to-chart-4/30 text-chart-4 border border-chart-4/30 rounded-full text-sm font-medium">
+                  Drama
+                </span>
+              </div>
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:bookCharacteristics")}</h3>
-            <Grid minColSize={"200px"} className="gap-4">
-              <DetailsCard
-                title="ISBN 10"
-                icon={<Icon icon={"lucide:scan-barcode"} className="size-5 text-muted-foreground" />}
-                description={"6555117737"}
-              />
-              <DetailsCard
-                title="ISBN 13"
-                icon={<Icon icon={"lucide:barcode"} className="size-5 text-muted-foreground" />}
-                description={"9786555117738"}
-              />
-              <DetailsCard
-                title={t("library:mood")}
-                icon={<Icon icon={"lucide:heart"} className="size-5 text-muted-foreground" />}
-                description={"Intenso"}
-              />
-            </Grid>
-          </div>
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:bookCharacteristics")}</h3>
+              <Grid minColSize={"200px"} className="gap-4">
+                <DetailsCard
+                  title="ISBN 10"
+                  icon={<Icon icon={"lucide:scan-barcode"} className="size-5 text-muted-foreground" />}
+                  description={"6555117737"}
+                />
+                <DetailsCard
+                  title="ISBN 13"
+                  icon={<Icon icon={"lucide:barcode"} className="size-5 text-muted-foreground" />}
+                  description={"9786555117738"}
+                />
+                <DetailsCard
+                  title={t("library:mood")}
+                  icon={<Icon icon={"lucide:heart"} className="size-5 text-muted-foreground" />}
+                  description={"Intenso"}
+                />
+              </Grid>
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <CommunityStats
-              stats={[
-                { label: t("feed:lists.planning"), icon: "lucide:bookmark", iconClass: "text-purple-400", value: "5%" },
-                { label: t("feed:lists.read"), icon: "lucide:book-open", iconClass: "text-chart-1", value: "15%" },
-                {
-                  label: t("feed:lists.reading"),
-                  icon: "lucide:check-circle",
-                  iconClass: "text-secondary",
-                  value: "72%",
-                },
-                { label: t("feed:lists.dropped"), icon: "lucide:x-circle", iconClass: "text-destructive", value: "8%" },
-              ]}
-            />
-          </div>
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <CommunityStats
+                stats={[
+                  {
+                    label: t("feed:lists.planning"),
+                    icon: "lucide:bookmark",
+                    iconClass: "text-purple-400",
+                    value: "5%",
+                  },
+                  { label: t("feed:lists.read"), icon: "lucide:book-open", iconClass: "text-chart-1", value: "15%" },
+                  {
+                    label: t("feed:lists.reading"),
+                    icon: "lucide:check-circle",
+                    iconClass: "text-secondary",
+                    value: "72%",
+                  },
+                  {
+                    label: t("feed:lists.dropped"),
+                    icon: "lucide:x-circle",
+                    iconClass: "text-destructive",
+                    value: "8%",
+                  },
+                ]}
+              />
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:contentWarnings")}</h3>
-            <div className="flex flex-wrap gap-2">
-              <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-1/20 to-chart-1/30 text-chart-1 border border-chart-1/30 rounded-full text-sm font-medium">
-                Violência
-              </span>
-              <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-purple-500/20 to-purple-500/30 text-purple-400 border border-purple-500/30 rounded-full text-sm font-medium">
-                Morte
-              </span>
-              <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-3/20 to-chart-3/30 text-chart-3 border border-chart-3/30 rounded-full text-sm font-medium">
-                Linguagem Forte
-              </span>
-              <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-primary/20 to-primary/30 text-primary border border-primary/30 rounded-full text-sm font-medium">
-                Vergonha Corporal
-              </span>
-              <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-4/20 to-chart-4/30 text-chart-4 border border-chart-4/30 rounded-full text-sm font-medium">
-                Disablismo
-              </span>
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:contentWarnings")}</h3>
+              <div className="flex flex-wrap gap-2">
+                <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-1/20 to-chart-1/30 text-chart-1 border border-chart-1/30 rounded-full text-sm font-medium">
+                  Violência
+                </span>
+                <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-purple-500/20 to-purple-500/30 text-purple-400 border border-purple-500/30 rounded-full text-sm font-medium">
+                  Morte
+                </span>
+                <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-3/20 to-chart-3/30 text-chart-3 border border-chart-3/30 rounded-full text-sm font-medium">
+                  Linguagem Forte
+                </span>
+                <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-primary/20 to-primary/30 text-primary border border-primary/30 rounded-full text-sm font-medium">
+                  Vergonha Corporal
+                </span>
+                <span className="px-3 py-1.5 blur-sm hover:blur-none transition-all bg-linear-to-r from-chart-4/20 to-chart-4/30 text-chart-4 border border-chart-4/30 rounded-full text-sm font-medium">
+                  Disablismo
+                </span>
+              </div>
+            </div>
+          </TabsContent>
+          <TabsContent value="lists">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <ListItem
+                list={
+                  {
+                    _count: { listItems: 0 },
+                    listItems: [],
+                    name: "",
+                    user: { name: "", profile: null },
+                  } as unknown as ApiTypes.ListWithPreview
+                }
+              />
             </div>
-          </div>
-        </TabsContent>
-        {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
-          <TabsContent value="reviews">
-            <ReviewItem
-              user={
-                {
-                  name: "John Doe",
-                  avatarURL: "https://assets.hardcover.app/editions/30399846/4434002844651.jpg",
-                  slug: "john-doe",
-                } as unknown as ApiTypes.User
-              }
-              reviewText={
-                "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
-              }
-              criteries={{
-                language: 5,
-                characters: 4,
-                all: 10,
-                story: 8,
-                theme: 9,
-              }}
-              date={new Date("2023-06-19")}
-            />
           </TabsContent>
+        </Tabs>
+      </DetailsPageLayout>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews.total})
+          </h3>
+          {isAuthenticated && (
+            <Button variant="outline" size="sm" className="shrink-0 gap-2" onClick={() => setMoreOpen(true)}>
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
+          )}
+        </div>
+        {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 ? (
+          <ReviewItem
+            user={
+              {
+                name: "John Doe",
+                avatarURL: "https://assets.hardcover.app/editions/30399846/4434002844651.jpg",
+                slug: "john-doe",
+              } as unknown as ApiTypes.User
+            }
+            reviewText={
+              "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
+            }
+            criteries={{ language: 5, characters: 4, all: 10, story: 8, theme: 9 }}
+            date={new Date("2023-06-19")}
+          />
+        ) : (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         )}
-        <TabsContent value="lists">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <ListItem
-              list={
-                {
-                  _count: { listItems: 0 },
-                  listItems: [],
-                  name: "",
-                  user: { name: "", profile: null },
-                } as unknown as ApiTypes.ListWithPreview
-              }
-            />
-          </div>
-        </TabsContent>
-      </Tabs>
-    </DetailsPageLayout>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 1f7dddd..00a78b9 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
 import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { t } from "i18next";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Grid } from "@/components/layouts/grid.tsx";
@@ -19,7 +20,9 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
 import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { GameModal } from "@/components/shared/modals/game";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
@@ -173,6 +176,7 @@ function GameDetailsRoute() {
 
   const rating = 4.2;
   const { t } = useTranslation();
+  const [moreOpen, setMoreOpen] = useState(false);
 
   const { data, isLoading, isError } = useQuery({
     queryKey: ["game", slug],
@@ -271,6 +275,8 @@ function GameDetailsRoute() {
             subtitle={releaseDate}
             description={game.summary}
             triggerLabel={t("library:moreOptions")}
+            open={moreOpen}
+            onOpenChange={setMoreOpen}
           >
             <GameModal />
           </MoreOptionsDialog>
@@ -307,171 +313,214 @@ function GameDetailsRoute() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {game.name}
-      </h1>
-      {game?.franchises[0]?.name && (
-        <div className="flex items-center space-x-2">
-          <Icon icon={"lucide:box"} className="size-5 text-muted-foreground" />
-          <Link
-            to={"/game/franchises/$slug"}
-            params={{ slug: game?.franchises[0]?.slug }}
-            className="text-xl text-muted-foreground"
-          >
-            {game?.franchises[0]?.name}
-          </Link>
-        </div>
-      )}
-
-      <div className="flex flex-wrap items-center gap-6 border-b border-border">
-        {reviews?.total >= 1 && (
-          <div className="flex items-center mb-5">
-            <div className="flex mr-2">
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
-            </div>
-            <span className="font-semibold text-card-foreground">{rating}</span>
-            <span className="text-muted-foreground ml-1">
-              ({reviews?.total} {t("library:reviews")})
-            </span>
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {game.name}
+        </h1>
+        {game?.franchises[0]?.name && (
+          <div className="flex items-center space-x-2">
+            <Icon icon={"lucide:box"} className="size-5 text-muted-foreground" />
+            <Link
+              to={"/game/franchises/$slug"}
+              params={{ slug: game?.franchises[0]?.slug }}
+              className="text-xl text-muted-foreground"
+            >
+              {game?.franchises[0]?.name}
+            </Link>
           </div>
         )}
-      </div>
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-            {(game.parentGame?.id ||
-              (game.prequels?.length ?? 0) > 0 ||
-              (game.expandedGames?.length ?? 0) > 0 ||
-              (game.sequels?.length ?? 0) > 0 ||
-              (game.dlcs?.length ?? 0) > 0 ||
-              (game.expansions?.length ?? 0) > 0 ||
-              (game.ports?.length ?? 0) > 0 ||
-              (game.remakes?.length ?? 0) > 0 ||
-              (game.remasters?.length ?? 0) > 0 ||
-              (game.bundles?.length ?? 0) > 0) && <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>}
-            {reviews?.total >= 1 && (
-              <TabsTrigger value="reviews" className="capitalize">
-                {t("library:reviews")} ({reviews?.total})
-              </TabsTrigger>
-            )}
-            <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
-            {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
-              <TabsTrigger value="screenshots">
-                {t("library:screenshots")} ({screenshots?.length ?? 0})
-              </TabsTrigger>
-            )}
-          </TabsList>
-        </div>
-        <TabsContent value="info" className={"space-y-5"}>
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <GenrePills
-              genres={game.genres.map((g: { name: string }) => g.name)}
-              getLabel={(g) => getGenreLabel(t, g)}
-            />
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <div className="text-muted-foreground leading-relaxed space-y-4">
-              <p>{game.summary}</p>
+        <div className="flex flex-wrap items-center gap-6 border-b border-border">
+          {reviews?.total >= 1 && (
+            <div className="flex items-center mb-5">
+              <div className="flex mr-2">
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+              </div>
+              <span className="font-semibold text-card-foreground">{rating}</span>
+              <span className="text-muted-foreground ml-1">
+                ({reviews?.total} {t("library:reviews")})
+              </span>
             </div>
+          )}
+        </div>
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
+              {(game.parentGame?.id ||
+                (game.prequels?.length ?? 0) > 0 ||
+                (game.expandedGames?.length ?? 0) > 0 ||
+                (game.sequels?.length ?? 0) > 0 ||
+                (game.dlcs?.length ?? 0) > 0 ||
+                (game.expansions?.length ?? 0) > 0 ||
+                (game.ports?.length ?? 0) > 0 ||
+                (game.remakes?.length ?? 0) > 0 ||
+                (game.remasters?.length ?? 0) > 0 ||
+                (game.bundles?.length ?? 0) > 0) && (
+                <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
+              )}
+              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+              {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
+                <TabsTrigger value="screenshots">
+                  {t("library:screenshots")} ({screenshots?.length ?? 0})
+                </TabsTrigger>
+              )}
+            </TabsList>
           </div>
-
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:gameCharacteristics")}</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-              <DetailsCard
-                title={t("library:developers")}
-                icon={<Icon icon={"lucide:code"} className="size-5 text-muted-foreground" />}
-                description={game.involvedCompanies
-                  .filter((c: { developer: string }) => c.developer)
-                  .map((c: { companyName: string }) => c.companyName)
-                  .join(", ")}
-              />
-              <DetailsCard
-                title={t("library:publishers")}
-                icon={<Icon icon={"lucide:building-2"} className="size-5 text-muted-foreground" />}
-                description={game.involvedCompanies
-                  .filter((c: { publisher: string }) => c.publisher)
-                  .map((c: { companyName: string }) => c.companyName)
-                  .join(", ")}
-              />
-              <DetailsCard
-                title={t("library:platforms")}
-                icon={<Icon icon={"lucide:computer"} className="size-5 text-muted-foreground" />}
-                description={game.platforms.map((p: { name: string }) => p.name).join(", ")}
-              />
-              <DetailsCard
-                title={t("library:themes")}
-                icon={<Icon icon={"lucide:tree-deciduous"} className="size-5 text-muted-foreground" />}
-                description={game.themes.join(", ")}
-              />
-              <DetailsCard
-                title={t("library:gameModes")}
-                icon={<Icon icon={"lucide:ethernet-port"} className="size-5 text-muted-foreground" />}
-                description={game.gameModes.map((m: { name: string }) => m.name).join(", ")}
-              />
-              <DetailsCard
-                title={t("library:playerPerspectives")}
-                icon={<Icon icon={"lucide:cctv"} className="size-5 text-muted-foreground" />}
-                description={game.playerPerspectives.map((p: { name: string }) => p.name).join(", ")}
+          <TabsContent value="info" className={"space-y-5"}>
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{game.summary}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <GenrePills
+                genres={game.genres.map((g: { name: string }) => g.name)}
+                getLabel={(g) => getGenreLabel(t, g)}
               />
-              {game.gameEngines.length > 0 && (
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:gameCharacteristics")}</h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                 <DetailsCard
-                  title={t("library:gameEngine")}
-                  icon={<Icon icon={"lucide:bug"} className="size-5 text-muted-foreground" />}
-                  description={game.gameEngines.map((e: { name: string }) => e.name).join(", ")}
+                  title={t("library:developers")}
+                  icon={<Icon icon={"lucide:code"} className="size-5 text-muted-foreground" />}
+                  description={game.involvedCompanies
+                    .filter((c: { developer: string }) => c.developer)
+                    .map((c: { companyName: string }) => c.companyName)
+                    .join(", ")}
                 />
-              )}
+                <DetailsCard
+                  title={t("library:publishers")}
+                  icon={<Icon icon={"lucide:building-2"} className="size-5 text-muted-foreground" />}
+                  description={game.involvedCompanies
+                    .filter((c: { publisher: string }) => c.publisher)
+                    .map((c: { companyName: string }) => c.companyName)
+                    .join(", ")}
+                />
+                <DetailsCard
+                  title={t("library:platforms")}
+                  icon={<Icon icon={"lucide:computer"} className="size-5 text-muted-foreground" />}
+                  description={game.platforms.map((p: { name: string }) => p.name).join(", ")}
+                />
+                <DetailsCard
+                  title={t("library:themes")}
+                  icon={<Icon icon={"lucide:tree-deciduous"} className="size-5 text-muted-foreground" />}
+                  description={game.themes.join(", ")}
+                />
+                <DetailsCard
+                  title={t("library:gameModes")}
+                  icon={<Icon icon={"lucide:ethernet-port"} className="size-5 text-muted-foreground" />}
+                  description={game.gameModes.map((m: { name: string }) => m.name).join(", ")}
+                />
+                <DetailsCard
+                  title={t("library:playerPerspectives")}
+                  icon={<Icon icon={"lucide:cctv"} className="size-5 text-muted-foreground" />}
+                  description={game.playerPerspectives.map((p: { name: string }) => p.name).join(", ")}
+                />
+                {game.gameEngines.length > 0 && (
+                  <DetailsCard
+                    title={t("library:gameEngine")}
+                    icon={<Icon icon={"lucide:bug"} className="size-5 text-muted-foreground" />}
+                    description={game.gameEngines.map((e: { name: string }) => e.name).join(", ")}
+                  />
+                )}
+              </div>
             </div>
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <CommunityStats
-              stats={[
-                {
-                  label: t("feed:lists.wanttoplay"),
-                  icon: "lucide:bookmark",
-                  iconClass: "text-purple-400",
-                  value: "5%",
-                },
-                { label: t("feed:lists.playing"), icon: "lucide:gamepad", iconClass: "text-chart-1", value: "15%" },
-                {
-                  label: t("feed:lists.played"),
-                  icon: "lucide:check-circle",
-                  iconClass: "text-secondary",
-                  value: "72%",
-                },
-                { label: t("feed:lists.dropped"), icon: "lucide:x-circle", iconClass: "text-destructive", value: "8%" },
-              ]}
-            />
-          </div>
-          <Carousel className="w-full px-4" opts={{ loop: true, align: "center" }}>
-            <CarouselContent>
-              {game.videos.map((video: { checksum: string; videoId: string; name: string }) => (
-                <CarouselItem key={video.checksum}>
-                  <iframe src={video.videoId} allowFullScreen className="w-full aspect-video" title={video.name} />
-                </CarouselItem>
-              ))}
-              {game.screenshots.map((screenshot: { checksum: string; imageId: string }) => (
-                <CarouselItem key={screenshot.checksum}>
-                  <img src={screenshot.imageId} className="w-full aspect-video object-cover" alt="Screenshot" />
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <CarouselPrevious variant="default" className="-left-6" />
-            <CarouselNext variant="default" className="-right-6" />
-          </Carousel>
-        </TabsContent>
-        <TabsContent value="reviews">
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <CommunityStats
+                stats={[
+                  {
+                    label: t("feed:lists.wanttoplay"),
+                    icon: "lucide:bookmark",
+                    iconClass: "text-purple-400",
+                    value: "5%",
+                  },
+                  { label: t("feed:lists.playing"), icon: "lucide:gamepad", iconClass: "text-chart-1", value: "15%" },
+                  {
+                    label: t("feed:lists.played"),
+                    icon: "lucide:check-circle",
+                    iconClass: "text-secondary",
+                    value: "72%",
+                  },
+                  {
+                    label: t("feed:lists.dropped"),
+                    icon: "lucide:x-circle",
+                    iconClass: "text-destructive",
+                    value: "8%",
+                  },
+                ]}
+              />
+            </div>
+            <Carousel className="w-full px-4" opts={{ loop: true, align: "center" }}>
+              <CarouselContent>
+                {game.videos.map((video: { checksum: string; videoId: string; name: string }) => (
+                  <CarouselItem key={video.checksum}>
+                    <iframe src={video.videoId} allowFullScreen className="w-full aspect-video" title={video.name} />
+                  </CarouselItem>
+                ))}
+                {game.screenshots.map((screenshot: { checksum: string; imageId: string }) => (
+                  <CarouselItem key={screenshot.checksum}>
+                    <img src={screenshot.imageId} className="w-full aspect-video object-cover" alt="Screenshot" />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious variant="default" className="-left-6" />
+              <CarouselNext variant="default" className="-right-6" />
+            </Carousel>
+          </TabsContent>
+          <TabsContent value="lists">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <ListItem
+                list={
+                  {
+                    _count: { listItems: 0 },
+                    listItems: [],
+                    name: "",
+                    user: { name: "", profile: null },
+                  } as unknown as ApiTypes.ListWithPreview
+                }
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="relations">
+            {(() => {
+              const { nodes, edges } = buildRelationsData(game);
+              return <Relations nodes={nodes} edges={edges} />;
+            })()}
+          </TabsContent>
+          {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
+            <TabsContent value="screenshots">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {screenshots?.map((screenshot: { checksum: string; imageId: string }) => (
+                  <ImageZoom key={screenshot.checksum}>
+                    <img src={screenshot.imageId} alt="" />
+                  </ImageZoom>
+                ))}
+              </div>
+            </TabsContent>
+          )}
+        </Tabs>
+      </DetailsPageLayout>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews?.total ?? 0})
+          </h3>
+          {isAuthenticated && (
+            <Button variant="outline" size="sm" className="shrink-0 gap-2" onClick={() => setMoreOpen(true)}>
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
+          )}
+        </div>
+        {(reviews?.total ?? 0) >= 1 ? (
           <ReviewItem
             user={
               {
@@ -483,48 +532,21 @@ function GameDetailsRoute() {
             reviewText={
               "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
             }
-            criteries={{
-              language: 5,
-              characters: 4,
-              all: 10,
-              story: 8,
-              theme: 9,
-            }}
+            criteries={{ language: 5, characters: 4, all: 10, story: 8, theme: 9 }}
             date={new Date("2023-06-19")}
           />
-        </TabsContent>
-        <TabsContent value="lists">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <ListItem
-              list={
-                {
-                  _count: { listItems: 0 },
-                  listItems: [],
-                  name: "",
-                  user: { name: "", profile: null },
-                } as unknown as ApiTypes.ListWithPreview
-              }
-            />
-          </div>
-        </TabsContent>
-        <TabsContent value="relations">
-          {(() => {
-            const { nodes, edges } = buildRelationsData(game);
-            return <Relations nodes={nodes} edges={edges} />;
-          })()}
-        </TabsContent>
-        {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
-          <TabsContent value="screenshots">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {screenshots?.map((screenshot: { checksum: string; imageId: string }) => (
-                <ImageZoom key={screenshot.checksum}>
-                  <img src={screenshot.imageId} alt="" />
-                </ImageZoom>
-              ))}
-            </div>
-          </TabsContent>
+        ) : (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         )}
-      </Tabs>
-    </DetailsPageLayout>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index 58fab2f..46eadb4 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -1,7 +1,7 @@
 import { Icon } from "@iconify/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
-import type { ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Grid } from "@/components/layouts/grid.tsx";
@@ -20,6 +20,8 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
 import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { MangaModal } from "@/components/shared/modals/manga";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -86,6 +88,7 @@ function MangaDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const [moreOpen, setMoreOpen] = useState(false);
   if (isLoading || reviewsData.isLoading) return <LoadingDetails />;
   if (isError || reviewsData.isError || !manga) return <ErrorComponent />;
 
@@ -137,6 +140,8 @@ function MangaDetailsRoute() {
             subtitle={manga.published.string}
             description={manga.synopsis}
             triggerLabel={t("library:moreOptions")}
+            open={moreOpen}
+            onOpenChange={setMoreOpen}
           >
             <MangaModal />
           </MoreOptionsDialog>
@@ -239,140 +244,190 @@ function MangaDetailsRoute() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {manga.title}
-      </h1>
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {manga.title}
+        </h1>
 
-      <div className="flex flex-wrap items-center gap-6 border-b border-border pb-5">
-        {reviews.total >= 1 && (
-          <div className="flex items-center gap-2">
-            <div className="flex">
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
-              <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+        <div className="flex flex-wrap items-center gap-6 border-b border-border pb-5">
+          {reviews.total >= 1 && (
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-chart-3 fill-chart-3" />
+                <Icon icon={"lucide:star"} className="size-5 text-muted-foreground" />
+              </div>
+              <span className="font-semibold text-card-foreground">{rating}</span>
+              <span className="text-muted-foreground">
+                ({reviews.total} {t("library:reviews")})
+              </span>
             </div>
-            <span className="font-semibold text-card-foreground">{rating}</span>
-            <span className="text-muted-foreground">
-              ({reviews.total} {t("library:reviews")})
-            </span>
-          </div>
-        )}
-      </div>
-
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-            <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
-            <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-            {reviews.total >= 1 && (
-              <TabsTrigger value="reviews" className="capitalize">
-                {t("library:reviews")} ({reviews.total})
-              </TabsTrigger>
-            )}
-            <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
-          </TabsList>
+          )}
         </div>
-        <TabsContent value="info" className="space-y-5">
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <GenrePills genres={manga.genres} getLabel={(g) => getGenreLabel(t, g)} />
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <p className="text-muted-foreground leading-relaxed">{manga.synopsis}</p>
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
+              <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
+              <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+            </TabsList>
           </div>
+          <TabsContent value="info" className="space-y-5">
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{manga.synopsis}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <GenrePills genres={manga.genres} getLabel={(g) => getGenreLabel(t, g)} />
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:mangaCharacteristics")}</h3>
-            <Grid minColSize={"200px"} className="gap-4">
-              {manga.type && (
-                <DetailsCard
-                  title={t("library:type")}
-                  icon={<Icon icon={"lucide:file-type"} className="size-5 text-muted-foreground" />}
-                  description={manga.type}
-                />
-              )}
-              {manga.numberOfChapters && (
-                <DetailsCard
-                  title={t("library:chapters")}
-                  icon={<Icon icon={"lucide:book-open-text"} className="size-5 text-muted-foreground" />}
-                  description={manga.numberOfChapters}
-                />
-              )}
-              {manga.numberOfVolumes && (
-                <DetailsCard
-                  title={t("library:volumes")}
-                  icon={<Icon icon={"lucide:swatch-book"} className="size-5 text-muted-foreground" />}
-                  description={manga.numberOfVolumes}
-                />
-              )}
-              {manga.themes.length >= 1 && (
-                <DetailsCard
-                  title={t("library:themes")}
-                  icon={<Icon icon={"lucide:tree-palm"} className="size-5 text-muted-foreground" />}
-                  description={manga.themes.map((theme: string, index: number) => (
-                    <span key={theme}>
-                      <Link to="/" search={{ landing: "true" }}>
-                        {getGenreLabel(t, theme)}
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:mangaCharacteristics")}</h3>
+              <Grid minColSize={"200px"} className="gap-4">
+                {manga.type && (
+                  <DetailsCard
+                    title={t("library:type")}
+                    icon={<Icon icon={"lucide:file-type"} className="size-5 text-muted-foreground" />}
+                    description={manga.type}
+                  />
+                )}
+                {manga.numberOfChapters && (
+                  <DetailsCard
+                    title={t("library:chapters")}
+                    icon={<Icon icon={"lucide:book-open-text"} className="size-5 text-muted-foreground" />}
+                    description={manga.numberOfChapters}
+                  />
+                )}
+                {manga.numberOfVolumes && (
+                  <DetailsCard
+                    title={t("library:volumes")}
+                    icon={<Icon icon={"lucide:swatch-book"} className="size-5 text-muted-foreground" />}
+                    description={manga.numberOfVolumes}
+                  />
+                )}
+                {manga.themes.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:themes")}
+                    icon={<Icon icon={"lucide:tree-palm"} className="size-5 text-muted-foreground" />}
+                    description={manga.themes.map((theme: string, index: number) => (
+                      <span key={theme}>
+                        <Link to="/" search={{ landing: "true" }}>
+                          {getGenreLabel(t, theme)}
+                        </Link>
+                        {index < manga.themes.length - 1 && ", "}
+                      </span>
+                    ))}
+                  />
+                )}
+                {manga.authors.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:authors")}
+                    icon={<Icon icon={"lucide:pen"} className="size-5 text-muted-foreground" />}
+                    description={manga.authors.map((au: { name: string; malId: number }, index: number) => (
+                      <Link to="/" key={au.malId} search={{ landing: "true " }}>
+                        {au.name}
+                        {index < manga.authors.length - 1 && "; "}
                       </Link>
-                      {index < manga.themes.length - 1 && ", "}
-                    </span>
-                  ))}
-                />
-              )}
-              {manga.authors.length >= 1 && (
-                <DetailsCard
-                  title={t("library:authors")}
-                  icon={<Icon icon={"lucide:pen"} className="size-5 text-muted-foreground" />}
-                  description={manga.authors.map((au: { name: string; malId: number }, index: number) => (
-                    <Link to="/" key={au.malId} search={{ landing: "true " }}>
-                      {au.name}
-                      {index < manga.authors.length - 1 && "; "}
-                    </Link>
-                  ))}
-                />
-              )}
-              {manga.serializations && (
-                <DetailsCard
-                  title={t("library:publisher")}
-                  icon={<Icon icon={"lucide:notebook"} className="size-5 text-muted-foreground" />}
-                  description={manga.serializations.map((sz: { name: string; malId: number }, index: number) => (
-                    <Link to="/" key={sz.malId} search={{ landing: "true" }}>
-                      {sz.name}
-                      {index < manga.serializations.length - 1 && ", "}
-                    </Link>
-                  ))}
+                    ))}
+                  />
+                )}
+                {manga.serializations && (
+                  <DetailsCard
+                    title={t("library:publisher")}
+                    icon={<Icon icon={"lucide:notebook"} className="size-5 text-muted-foreground" />}
+                    description={manga.serializations.map((sz: { name: string; malId: number }, index: number) => (
+                      <Link to="/" key={sz.malId} search={{ landing: "true" }}>
+                        {sz.name}
+                        {index < manga.serializations.length - 1 && ", "}
+                      </Link>
+                    ))}
+                  />
+                )}
+              </Grid>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <CommunityStats
+                stats={[
+                  {
+                    label: t("feed:lists.planning"),
+                    icon: "lucide:bookmark",
+                    iconClass: "text-purple-400",
+                    value: "5%",
+                  },
+                  {
+                    label: t("feed:lists.reading"),
+                    icon: "lucide:book-open-text",
+                    iconClass: "text-chart-1",
+                    value: "15%",
+                  },
+                  {
+                    label: t("feed:lists.read"),
+                    icon: "lucide:check-circle",
+                    iconClass: "text-secondary",
+                    value: "72%",
+                  },
+                  {
+                    label: t("feed:lists.dropped"),
+                    icon: "lucide:x-circle",
+                    iconClass: "text-destructive",
+                    value: "8%",
+                  },
+                ]}
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="relations">
+            <Relations nodes={[]} edges={[]} />
+          </TabsContent>
+          <TabsContent value="lists">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <ListItem
+                list={
+                  {
+                    _count: { listItems: 0 },
+                    listItems: [],
+                    name: "",
+                    user: { name: "", profile: null },
+                  } as unknown as ApiTypes.ListWithPreview
+                }
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="characters">
+            <Grid minColSize={"150px"} className="gap-4">
+              {manga.characters?.map((character: { name: string; imageUrl: string }) => (
+                <CharacterItem
+                  key={character.name}
+                  name={character.name}
+                  imageUrl={character.imageUrl.replace(
+                    "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
+                    "",
+                  )}
                 />
-              )}
+              ))}
             </Grid>
-          </div>
+          </TabsContent>
+        </Tabs>
+      </DetailsPageLayout>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <CommunityStats
-              stats={[
-                { label: t("feed:lists.planning"), icon: "lucide:bookmark", iconClass: "text-purple-400", value: "5%" },
-                {
-                  label: t("feed:lists.reading"),
-                  icon: "lucide:book-open-text",
-                  iconClass: "text-chart-1",
-                  value: "15%",
-                },
-                { label: t("feed:lists.read"), icon: "lucide:check-circle", iconClass: "text-secondary", value: "72%" },
-                { label: t("feed:lists.dropped"), icon: "lucide:x-circle", iconClass: "text-destructive", value: "8%" },
-              ]}
-            />
-          </div>
-        </TabsContent>
-        <TabsContent value="relations">
-          <Relations nodes={[]} edges={[]} />
-        </TabsContent>
-        <TabsContent value="reviews">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews.total})
+          </h3>
+          {isAuthenticated && (
+            <Button variant="outline" size="sm" className="shrink-0 gap-2" onClick={() => setMoreOpen(true)}>
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
+          )}
+        </div>
+        {reviews.total >= 1 ? (
           <ReviewItem
             user={
               {
@@ -384,45 +439,21 @@ function MangaDetailsRoute() {
             reviewText={
               "Very foda! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Este livro é uma obra-prima que merece ser lida por todos os amantes de boa literatura. BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA A forma como o autor desenvolve os personagens é simplesmente magnífica, cada um com sua própria voz e personalidade única."
             }
-            criteries={{
-              language: 5,
-              characters: 4,
-              all: 10,
-              story: 8,
-              theme: 9,
-            }}
+            criteries={{ language: 5, characters: 4, all: 10, story: 8, theme: 9 }}
             date={new Date("2023-06-19")}
           />
-        </TabsContent>
-        <TabsContent value="lists">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <ListItem
-              list={
-                {
-                  _count: { listItems: 0 },
-                  listItems: [],
-                  name: "",
-                  user: { name: "", profile: null },
-                } as unknown as ApiTypes.ListWithPreview
-              }
-            />
-          </div>
-        </TabsContent>
-        <TabsContent value="characters">
-          <Grid minColSize={"150px"} className="gap-4">
-            {manga.characters?.map((character: { name: string; imageUrl: string }) => (
-              <CharacterItem
-                key={character.name}
-                name={character.name}
-                imageUrl={character.imageUrl.replace(
-                  "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
-                  "",
-                )}
-              />
-            ))}
-          </Grid>
-        </TabsContent>
-      </Tabs>
-    </DetailsPageLayout>
+        ) : (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/routes/movie/$slug.tsx b/src/routes/movie/$slug.tsx
index 881c7f2..259d3b6 100644
--- a/src/routes/movie/$slug.tsx
+++ b/src/routes/movie/$slug.tsx
@@ -22,6 +22,8 @@ import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { MovieModal } from "@/components/shared/modals/movie";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { StarRating } from "@/components/shared/star-rating";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -328,12 +330,13 @@ function MovieDetailsRoute() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {movie.title}
-      </h1>
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {movie.title}
+        </h1>
 
-      {/* {movie?.belongsToCollection?.name && (
+        {/* {movie?.belongsToCollection?.name && (
         <div className="flex items-center space-x-2">
           <Icon icon={"lucide:box"} className="size-5 text-muted-foreground" />
           <a href={`/movies-collection/${movie?.belongsToCollection?.id}`} className="text-xl text-muted-foreground">
@@ -342,252 +345,278 @@ function MovieDetailsRoute() {
         </div>
       )} */}
 
-      <div className="flex flex-wrap items-center gap-6 border-b border-border">
-        <div className="flex items-center mb-3 space-x-1">
-          <StarRating value={rating} className="mr-1" />
-          <span className="font-semibold text-card-foreground">{rating}</span>
-          <span className="text-muted-foreground">
-            ({reviews.total} {t("library:reviews")})
-          </span>
+        <div className="flex flex-wrap items-center gap-6 border-b border-border">
+          <div className="flex items-center mb-3 space-x-1">
+            <StarRating value={rating} className="mr-1" />
+            <span className="font-semibold text-card-foreground">{rating}</span>
+            <span className="text-muted-foreground">
+              ({reviews.total} {t("library:reviews")})
+            </span>
+          </div>
         </div>
-      </div>
 
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-            <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
-            {movie.backdrops.length >= 1 && <TabsTrigger value="medias">{t("library:medias")}</TabsTrigger>}
-            <TabsTrigger value="reviews" className="capitalize">
-              {t("library:reviews")} ({reviews?.total ?? 0})
-            </TabsTrigger>
-            <TabsTrigger value="lists">
-              {t("library:lists")} ({listsQuery.data?.total ?? 0})
-            </TabsTrigger>
-            <TabsTrigger value="comments">{t("comments:title")}</TabsTrigger>
-          </TabsList>
-        </div>
-        <TabsContent value="info" className={"space-y-5"}>
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <GenrePills genres={movie.genres} getLabel={(g) => getGenreLabel(t, g)} />
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
+              <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
+              <TabsTrigger value="comments">{t("comments:title")}</TabsTrigger>
+            </TabsList>
           </div>
-
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <div className="text-muted-foreground leading-relaxed space-y-4">
-              <p>{movie.overview}</p>
+          <TabsContent value="info" className={"space-y-5"}>
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{movie.overview}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <GenrePills genres={movie.genres} getLabel={(g) => getGenreLabel(t, g)} />
             </div>
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:movieCharacteristics")}</h3>
-            <Grid minColSize={"200px"} className="gap-4">
-              <DetailsCard
-                title={t("library:directors")}
-                icon={<Icon icon={"lucide:clapperboard"} className="size-5 text-muted-foreground" />}
-                description={
-                  <Link to="/" search={{ landing: "true" }} className="font-medium text-card-foreground">
-                    Tom Gormican
-                  </Link>
-                }
-              />
-              {movie.budget > 0 && (
-                <DetailsCard
-                  title={t("library:budget")}
-                  icon={<Icon icon={"lucide:piggy-bank"} className="size-5 text-muted-foreground" />}
-                  description={new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
-                    movie.budget,
-                  )}
-                />
-              )}
-              {movie.revenue > 0 && (
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:movieCharacteristics")}</h3>
+              <Grid minColSize={"200px"} className="gap-4">
                 <DetailsCard
-                  title={t("library:revenue")}
-                  icon={<Icon icon={"lucide:ticket"} className="size-5 text-muted-foreground" />}
-                  description={new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
-                    movie.revenue,
-                  )}
-                />
-              )}
-              {movie?.spokenLanguages[0]?.name && (
-                <DetailsCard
-                  title={t("library:language")}
-                  icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
-                  description={movie?.spokenLanguages[0]?.name}
-                />
-              )}
-              {movie?.productionCompanies?.length >= 1 && (
-                <DetailsCard
-                  title={t("library:productionCompanies")}
-                  icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
+                  title={t("library:directors")}
+                  icon={<Icon icon={"lucide:clapperboard"} className="size-5 text-muted-foreground" />}
                   description={
-                    <span className="inline-flex items-center gap-1.5">
-                      <span className="truncate">{movie.productionCompanies[0].name}</span>
-                      {movie.productionCompanies.length > 1 && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span className="shrink-0 cursor-default rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
-                              +{movie.productionCompanies.length - 1}
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <ul className="flex flex-col gap-0.5">
-                              {movie.productionCompanies.slice(1).map((pc: { name: string }) => (
-                                <li key={pc.name}>{pc.name}</li>
-                              ))}
-                            </ul>
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </span>
+                    <Link to="/" search={{ landing: "true" }} className="font-medium text-card-foreground">
+                      Tom Gormican
+                    </Link>
                   }
                 />
-              )}
-              {movie.runtime > 0 && (
-                <DetailsCard
-                  title={t("library:runtime")}
-                  icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
-                  description={`${movie.runtime} min`}
-                />
-              )}
-            </Grid>
-          </div>
+                {movie.budget > 0 && (
+                  <DetailsCard
+                    title={t("library:budget")}
+                    icon={<Icon icon={"lucide:piggy-bank"} className="size-5 text-muted-foreground" />}
+                    description={new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
+                      movie.budget,
+                    )}
+                  />
+                )}
+                {movie.revenue > 0 && (
+                  <DetailsCard
+                    title={t("library:revenue")}
+                    icon={<Icon icon={"lucide:ticket"} className="size-5 text-muted-foreground" />}
+                    description={new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
+                      movie.revenue,
+                    )}
+                  />
+                )}
+                {movie?.spokenLanguages[0]?.name && (
+                  <DetailsCard
+                    title={t("library:language")}
+                    icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
+                    description={movie?.spokenLanguages[0]?.name}
+                  />
+                )}
+                {movie?.productionCompanies?.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:productionCompanies")}
+                    icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
+                    description={
+                      <span className="inline-flex items-center gap-1.5">
+                        <span className="truncate">{movie.productionCompanies[0].name}</span>
+                        {movie.productionCompanies.length > 1 && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="shrink-0 cursor-default rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+                                +{movie.productionCompanies.length - 1}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <ul className="flex flex-col gap-0.5">
+                                {movie.productionCompanies.slice(1).map((pc: { name: string }) => (
+                                  <li key={pc.name}>{pc.name}</li>
+                                ))}
+                              </ul>
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </span>
+                    }
+                  />
+                )}
+                {movie.runtime > 0 && (
+                  <DetailsCard
+                    title={t("library:runtime")}
+                    icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
+                    description={`${movie.runtime} min`}
+                  />
+                )}
+              </Grid>
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <CommunityStats
-              stats={[
-                {
-                  label: t("feed:lists.planning"),
-                  icon: "lucide:bookmark",
-                  iconClass: "text-purple-400",
-                  value: `${movie.progressStats?.planToWatch?.percentage ?? 0}%`,
-                  sub: `${movie.progressStats?.planToWatch?.count ?? 0} ${t("library:users")}`,
-                },
-                {
-                  label: t("feed:lists.watching"),
-                  icon: "lucide:tv-minimal-play",
-                  iconClass: "text-chart-1",
-                  value: `${movie.progressStats?.watching?.percentage ?? 0}%`,
-                  sub: `${movie.progressStats?.watching?.count ?? 0} ${t("library:users")}`,
-                },
-                {
-                  label: t("feed:lists.completed"),
-                  icon: "lucide:check-circle",
-                  iconClass: "text-secondary",
-                  value: `${movie.progressStats?.completed?.percentage ?? 0}%`,
-                  sub: `${movie.progressStats?.completed?.count ?? 0} ${t("library:users")}`,
-                },
-                {
-                  label: t("feed:lists.dropped"),
-                  icon: "lucide:x-circle",
-                  iconClass: "text-destructive",
-                  value: `${movie.progressStats?.dropped?.percentage ?? 0}%`,
-                  sub: `${movie.progressStats?.dropped?.count ?? 0} ${t("library:users")}`,
-                },
-              ]}
-            />
-          </div>
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <CommunityStats
+                stats={[
+                  {
+                    label: t("feed:lists.planning"),
+                    icon: "lucide:bookmark",
+                    iconClass: "text-purple-400",
+                    value: `${movie.progressStats?.planToWatch?.percentage ?? 0}%`,
+                    sub: `${movie.progressStats?.planToWatch?.count ?? 0} ${t("library:users")}`,
+                  },
+                  {
+                    label: t("feed:lists.watching"),
+                    icon: "lucide:tv-minimal-play",
+                    iconClass: "text-chart-1",
+                    value: `${movie.progressStats?.watching?.percentage ?? 0}%`,
+                    sub: `${movie.progressStats?.watching?.count ?? 0} ${t("library:users")}`,
+                  },
+                  {
+                    label: t("feed:lists.completed"),
+                    icon: "lucide:check-circle",
+                    iconClass: "text-secondary",
+                    value: `${movie.progressStats?.completed?.percentage ?? 0}%`,
+                    sub: `${movie.progressStats?.completed?.count ?? 0} ${t("library:users")}`,
+                  },
+                  {
+                    label: t("feed:lists.dropped"),
+                    icon: "lucide:x-circle",
+                    iconClass: "text-destructive",
+                    value: `${movie.progressStats?.dropped?.percentage ?? 0}%`,
+                    sub: `${movie.progressStats?.dropped?.count ?? 0} ${t("library:users")}`,
+                  },
+                ]}
+              />
+            </div>
 
-          {movie.trailerId && (
-            <iframe
-              src={`https://youtube.com/embed/${movie.trailerId}`}
-              allowFullScreen
-              className="w-full aspect-video"
-              title="Trailer"
+            {(movie.trailerId || movie.backdrops.length >= 1) && (
+              <Carousel className="w-full" opts={{ loop: true, align: "center" }}>
+                <CarouselContent>
+                  {movie.trailerId && (
+                    <CarouselItem>
+                      <div className="relative w-full overflow-hidden pt-[56.25%]">
+                        <iframe
+                          src={`https://youtube.com/embed/${movie.trailerId}`}
+                          allowFullScreen
+                          className="absolute inset-0 w-full h-full"
+                          title="Trailer"
+                        />
+                      </div>
+                    </CarouselItem>
+                  )}
+                  {movie.backdrops?.map((url: string, i: number) => (
+                    <CarouselItem key={i}>
+                      <div className="relative w-full overflow-hidden pt-[56.25%]">
+                        <div
+                          className="absolute inset-0 bg-cover bg-center blur-xl scale-110"
+                          style={{ backgroundImage: `url(${url})` }}
+                          aria-hidden="true"
+                        />
+                        <ImageZoom className="absolute inset-0">
+                          <img src={url} alt={"Backdrop"} className="absolute inset-0 w-full h-full object-contain" />
+                        </ImageZoom>
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious variant="default" className="left-2" />
+                <CarouselNext variant="default" className="right-2" />
+              </Carousel>
+            )}
+          </TabsContent>
+          <TabsContent value="lists">
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+          <TabsContent value="comments">
+            <Comments
+              type="Movie"
+              movieId={movie.id}
+              showTitle={false}
+              containerClassName="border-0 bg-transparent p-0 shadow-none"
+              headerClassName="p-0"
+              contentClassName="p-0"
             />
-          )}
-        </TabsContent>
-        <TabsContent value="reviews">
-          {!reviews || reviews.items.length === 0 ? (
-            <Empty className="border-0">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <Icon icon="lucide:star" />
-                </EmptyMedia>
-                <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
-                <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            <div className="flex flex-col divide-y divide-border/30">
-              {reviews.items.map((review: ApiTypes.Review) => (
-                <ReviewItem
-                  key={review.id}
-                  user={review.user}
-                  reviewText={review.summary ?? ""}
-                  notes={review.notes}
-                  story={review.story}
-                  date={new Date(review.createdAt)}
-                  criteries={{
-                    all: Number(review.overall),
-                    direction: review.direction != null ? Number(review.direction) : undefined,
-                    production: review.production != null ? Number(review.production) : undefined,
-                    acting: review.acting != null ? Number(review.acting) : undefined,
-                  }}
-                  reviewId={review.id}
-                  reactions={review.reactions}
-                  onReact={(emoji, currentReaction) =>
-                    toggleReaction.mutate(
-                      { reviewId: review.id, currentReaction, emoji },
-                      { onSuccess: () => queryClient.invalidateQueries({ queryKey: ["movieReviews", movie.id] }) },
-                    )
-                  }
-                  isReacting={toggleReaction.isPending && toggleReaction.variables?.reviewId === review.id}
-                />
-              ))}
-            </div>
-          )}
-        </TabsContent>
-        <TabsContent value="lists">
-          {!listsQuery.data || listsQuery.data.items.length === 0 ? (
-            <Empty className="border-0">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <Icon icon="lucide:list" />
-                </EmptyMedia>
-                <EmptyTitle>{t("library:noLists")}</EmptyTitle>
-                <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {listsQuery.data.items.map((list) => (
-                <ListItem key={list.id} list={list} />
+          </TabsContent>
+          <TabsContent value="cast">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {movie.cast?.map((cast: { character: string; name: string; profileUrl: string }) => (
+                <CastItem key={cast.character} name={cast.name} character={cast.character} imageUrl={cast.profileUrl} />
               ))}
             </div>
+          </TabsContent>
+        </Tabs>
+      </DetailsPageLayout>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews?.total ?? 0})
+          </h3>
+          {isAuthenticated && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="shrink-0 gap-2"
+              onClick={() => {
+                setProgressMutation.mutate("Completed");
+                setMoreOpen(true);
+              }}
+            >
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
           )}
-        </TabsContent>
-        <TabsContent value="comments">
-          <Comments
-            type="Movie"
-            movieId={movie.id}
-            showTitle={false}
-            containerClassName="border-0 bg-transparent p-0 shadow-none"
-            headerClassName="p-0"
-            contentClassName="p-0"
-          />
-        </TabsContent>
-        <TabsContent value="cast">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            {movie.cast?.map((cast: { character: string; name: string; profileUrl: string }) => (
-              <CastItem key={cast.character} name={cast.name} character={cast.character} imageUrl={cast.profileUrl} />
+        </div>
+        {!reviews || reviews.items.length === 0 ? (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="flex flex-col divide-y divide-border/30">
+            {reviews.items.map((review: ApiTypes.Review) => (
+              <ReviewItem
+                key={review.id}
+                user={review.user}
+                reviewText={review.summary ?? ""}
+                notes={review.notes}
+                story={review.story}
+                date={new Date(review.createdAt)}
+                criteries={{
+                  all: Number(review.overall),
+                  direction: review.direction != null ? Number(review.direction) : undefined,
+                  production: review.production != null ? Number(review.production) : undefined,
+                  acting: review.acting != null ? Number(review.acting) : undefined,
+                }}
+                reviewId={review.id}
+                reactions={review.reactions}
+                onReact={(emoji, currentReaction) =>
+                  toggleReaction.mutate(
+                    { reviewId: review.id, currentReaction, emoji },
+                    { onSuccess: () => queryClient.invalidateQueries({ queryKey: ["movieReviews", movie.id] }) },
+                  )
+                }
+                isReacting={toggleReaction.isPending && toggleReaction.variables?.reviewId === review.id}
+              />
             ))}
           </div>
-        </TabsContent>
-        {movie.backdrops.length >= 1 && (
-          <TabsContent value="medias">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {movie.backdrops?.map((url: string, i: number) => (
-                <ImageZoom key={i}>
-                  <img src={url} alt={"Backdrop"} />
-                </ImageZoom>
-              ))}
-            </div>
-          </TabsContent>
         )}
-      </Tabs>
-    </DetailsPageLayout>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/tv/$slug.tsx b/src/routes/tv/$slug.tsx
index 77c6ab5..1ab56ee 100644
--- a/src/routes/tv/$slug.tsx
+++ b/src/routes/tv/$slug.tsx
@@ -22,6 +22,7 @@ import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { StarRating } from "@/components/shared/star-rating.tsx";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
@@ -531,351 +532,379 @@ function TVShowDetailsPage() {
   );
 
   return (
-    <DetailsPageLayout sidebar={sidebar}>
-      <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
-        {item.name}
-      </h1>
-
-      <div className="flex flex-wrap items-center gap-6 border-b border-border">
-        <div className="flex items-center mb-3 space-x-1">
-          <StarRating value={rating} className="mr-1" />
-          <span className="font-semibold text-card-foreground">{rating}</span>
-          <span className="text-muted-foreground">
-            ({reviews.total} {t("library:reviews")})
-          </span>
+    <>
+      <DetailsPageLayout sidebar={sidebar}>
+        <h1 className="text-3xl lg:text-4xl font-bold text-card-foreground bg-linear-to-r from-card-foreground to-muted-foreground bg-clip-text">
+          {item.name}
+        </h1>
+
+        <div className="flex flex-wrap items-center gap-6 border-b border-border">
+          <div className="flex items-center mb-3 space-x-1">
+            <StarRating value={rating} className="mr-1" />
+            <span className="font-semibold text-card-foreground">{rating}</span>
+            <span className="text-muted-foreground">
+              ({reviews.total} {t("library:reviews")})
+            </span>
+          </div>
         </div>
-      </div>
-
-      <Tabs defaultValue="info">
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
-            <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-
-            <TabsTrigger value="episodes">{t("library:episode_other")}</TabsTrigger>
 
-            <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
+        <Tabs defaultValue="info">
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
+              <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
 
-            <TabsTrigger value="medias">{t("library:medias")}</TabsTrigger>
+              <TabsTrigger value="episodes">{t("library:episode_other")}</TabsTrigger>
 
-            <TabsTrigger value="reviews" className="capitalize">
-              {t("library:reviews")} ({reviews.total})
-            </TabsTrigger>
+              <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
 
-            <TabsTrigger value="lists">
-              {t("library:lists")} ({listsQuery.data?.total ?? 0})
-            </TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
 
-            <TabsTrigger value="comments">{t("comments:title")}</TabsTrigger>
-          </TabsList>
-        </div>
-
-        <TabsContent value="info" className={"space-y-5"}>
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:genres")}</h3>
-            <div className="flex flex-wrap gap-2">
-              {item.genres.map((genre: string, index: number) => {
-                const colors = [
-                  "bg-chart-1/20 text-chart-1 border-chart-1/30 from-chart-1/20 to-chart-1/30",
-                  "bg-chart-2/20 text-chart-2 border-chart-2/30 from-chart-2/20 to-chart-2/30",
-                  "bg-chart-3/20 text-chart-3 border-chart-3/30 from-chart-3/20 to-chart-3/30",
-                  "bg-chart-4/20 text-chart-4 border-chart-4/30 from-chart-4/20 to-chart-4/30",
-                  "bg-chart-5/20 text-chart-5 border-chart-5/30 from-chart-5/20 to-chart-5/30",
-                ];
-                const color = colors[index % colors.length];
-
-                return (
-                  <span
-                    key={genre}
-                    className={`px-3 py-1.5 bg-linear-to-r ${color} border rounded-full text-sm font-medium`}
-                  >
-                    {getGenreLabel(t, genre)}
-                  </span>
-                );
-              })}
-            </div>
+              <TabsTrigger value="comments">{t("comments:title")}</TabsTrigger>
+            </TabsList>
           </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-3">{t("library:synopsis")}</h3>
-            <div className="text-muted-foreground leading-relaxed space-y-4">
-              <p>{item.tagline}</p>
+          <TabsContent value="info" className={"space-y-5"}>
+            <div className={"space-y-3"}>
+              <p className="text-muted-foreground leading-relaxed">{item.tagline}</p>
+              <h3 className="font-semibold text-card-foreground text-lg">{t("library:genres")}</h3>
+              <div className="flex flex-wrap gap-2">
+                {item.genres.map((genre: string, index: number) => {
+                  const colors = [
+                    "bg-chart-1/20 text-chart-1 border-chart-1/30 from-chart-1/20 to-chart-1/30",
+                    "bg-chart-2/20 text-chart-2 border-chart-2/30 from-chart-2/20 to-chart-2/30",
+                    "bg-chart-3/20 text-chart-3 border-chart-3/30 from-chart-3/20 to-chart-3/30",
+                    "bg-chart-4/20 text-chart-4 border-chart-4/30 from-chart-4/20 to-chart-4/30",
+                    "bg-chart-5/20 text-chart-5 border-chart-5/30 from-chart-5/20 to-chart-5/30",
+                  ];
+                  const color = colors[index % colors.length];
+
+                  return (
+                    <span
+                      key={genre}
+                      className={`px-3 py-1.5 bg-linear-to-r ${color} border rounded-full text-sm font-medium`}
+                    >
+                      {getGenreLabel(t, genre)}
+                    </span>
+                  );
+                })}
+              </div>
             </div>
-          </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:tvShowCharacteristics")}</h3>
-            <Grid minColSize={"200px"} className="gap-4 items-start">
-              {item?.createdBy.length >= 1 && (
-                <DetailsCard
-                  title={t("library:creators")}
-                  icon={<Icon icon={"lucide:file-pen-line"} className="size-5 text-muted-foreground" />}
-                  description={item.createdBy
-                    .map((cb: { name: string }) => {
-                      return cb.name;
-                    })
-                    .join(", ")}
-                />
-              )}
-              {item.numberOfSeasons && (
-                <DetailsCard
-                  title={t("library:season_other")}
-                  icon={<Icon icon={"lucide:hash"} className="size-5 text-muted-foreground" />}
-                  description={item.numberOfSeasons}
-                />
-              )}
-              {item.numberOfEpisodes && (
-                <DetailsCard
-                  title={t("library:totalEpisodes")}
-                  icon={<Icon icon={"lucide:tv"} className="size-5 text-muted-foreground" />}
-                  description={item.numberOfEpisodes}
-                />
-              )}
-              {item.originalLanguage && (
-                <DetailsCard
-                  title={t("library:language")}
-                  icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
-                  description={item.originalLanguage.toUpperCase()}
-                />
-              )}
-              {item?.productionCompanies?.length >= 1 && (
-                <DetailsCard
-                  title={t("library:productionCompanies")}
-                  icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
-                  description={
-                    <span className="inline-flex items-center gap-1.5">
-                      <span className="truncate">{item.productionCompanies[0].name}</span>
-                      {item.productionCompanies.length > 1 && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span className="shrink-0 cursor-default rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
-                              +{item.productionCompanies.length - 1}
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <ul className="flex flex-col gap-0.5">
-                              {item.productionCompanies.slice(1).map((pc: { name: string }) => (
-                                <li key={pc.name}>{pc.name}</li>
-                              ))}
-                            </ul>
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </span>
-                  }
-                />
-              )}
-              {item?.episodeRuntime?.length >= 1 && (
-                <DetailsCard
-                  title={t("library:runtime")}
-                  icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
-                  description={`${item?.episodeRuntime[0]} minutes`}
-                />
-              )}
-              {item.type && (
-                <DetailsCard
-                  title={t("library:type")}
-                  icon={<Icon icon={"lucide:file-type"} className="size-5 text-muted-foreground" />}
-                  description={item.type}
-                />
-              )}
-            </Grid>
-          </div>
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:tvShowCharacteristics")}</h3>
+              <Grid minColSize={"200px"} className="gap-4 items-start">
+                {item?.createdBy.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:creators")}
+                    icon={<Icon icon={"lucide:file-pen-line"} className="size-5 text-muted-foreground" />}
+                    description={item.createdBy
+                      .map((cb: { name: string }) => {
+                        return cb.name;
+                      })
+                      .join(", ")}
+                  />
+                )}
+                {item.numberOfSeasons && (
+                  <DetailsCard
+                    title={t("library:season_other")}
+                    icon={<Icon icon={"lucide:hash"} className="size-5 text-muted-foreground" />}
+                    description={item.numberOfSeasons}
+                  />
+                )}
+                {item.numberOfEpisodes && (
+                  <DetailsCard
+                    title={t("library:totalEpisodes")}
+                    icon={<Icon icon={"lucide:tv"} className="size-5 text-muted-foreground" />}
+                    description={item.numberOfEpisodes}
+                  />
+                )}
+                {item.originalLanguage && (
+                  <DetailsCard
+                    title={t("library:language")}
+                    icon={<Icon icon={"lucide:languages"} className="size-5 text-muted-foreground" />}
+                    description={item.originalLanguage.toUpperCase()}
+                  />
+                )}
+                {item?.productionCompanies?.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:productionCompanies")}
+                    icon={<Icon icon={"lucide:building"} className="size-5 text-muted-foreground" />}
+                    description={
+                      <span className="inline-flex items-center gap-1.5">
+                        <span className="truncate">{item.productionCompanies[0].name}</span>
+                        {item.productionCompanies.length > 1 && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="shrink-0 cursor-default rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+                                +{item.productionCompanies.length - 1}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <ul className="flex flex-col gap-0.5">
+                                {item.productionCompanies.slice(1).map((pc: { name: string }) => (
+                                  <li key={pc.name}>{pc.name}</li>
+                                ))}
+                              </ul>
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </span>
+                    }
+                  />
+                )}
+                {item?.episodeRuntime?.length >= 1 && (
+                  <DetailsCard
+                    title={t("library:runtime")}
+                    icon={<Icon icon={"lucide:clock"} className="size-5 text-muted-foreground" />}
+                    description={`${item?.episodeRuntime[0]} minutes`}
+                  />
+                )}
+                {item.type && (
+                  <DetailsCard
+                    title={t("library:type")}
+                    icon={<Icon icon={"lucide:file-type"} className="size-5 text-muted-foreground" />}
+                    description={item.type}
+                  />
+                )}
+              </Grid>
+            </div>
 
-          {isAuthenticated && (
-            <EpisodeProgress
-              seasons={mySeasons}
-              defaultSeason={1}
-              seasonCustomNames={{
-                0: t("library:specials"),
-              }}
-              isLoading={
-                toggleSeasonMutation.isPending || toggleAllMutation.isPending || toggleEpisodeMutation.isPending
-              }
-              onToggleEpisode={handleWatchEpisodeToggle}
-              onToggleSeason={handleWatchSeasonToggle}
-              onToggleAll={handleWatchAllToggle}
-            />
-          )}
+            {isAuthenticated && (
+              <EpisodeProgress
+                seasons={mySeasons}
+                defaultSeason={1}
+                seasonCustomNames={{
+                  0: t("library:specials"),
+                }}
+                isLoading={
+                  toggleSeasonMutation.isPending || toggleAllMutation.isPending || toggleEpisodeMutation.isPending
+                }
+                onToggleEpisode={handleWatchEpisodeToggle}
+                onToggleSeason={handleWatchSeasonToggle}
+                onToggleAll={handleWatchAllToggle}
+              />
+            )}
+
+            <div>
+              <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {(
+                  [
+                    {
+                      key: "planToWatch",
+                      label: t("feed:lists.planning"),
+                      icon: "lucide:bookmark",
+                      iconClassName: "text-purple-400",
+                    },
+                    {
+                      key: "watching",
+                      label: t("feed:lists.watching"),
+                      icon: "lucide:tv-minimal-play",
+                      iconClassName: "text-chart-1",
+                    },
+                    {
+                      key: "completed",
+                      label: t("feed:lists.completed"),
+                      icon: "lucide:check-circle",
+                      iconClassName: "text-secondary",
+                    },
+                    {
+                      key: "dropped",
+                      label: t("feed:lists.dropped"),
+                      icon: "lucide:x-circle",
+                      iconClassName: "text-destructive",
+                    },
+                  ] as const
+                ).map((stat) => {
+                  const value = item.progressStats?.[stat.key] ?? { count: 0, percentage: 0 };
+
+                  return (
+                    <div
+                      key={stat.key}
+                      className="bg-linear-to-br from-muted/50 to-muted p-4 rounded-xl border border-border"
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium text-muted-foreground">{stat.label}</span>
+                        <Icon icon={stat.icon} className={cn("size-5", stat.iconClassName)} />
+                      </div>
+                      <p className="text-2xl font-bold text-card-foreground">{value.percentage}%</p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {value.count} {t("library:users")}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
 
-          <div>
-            <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              {(
-                [
-                  {
-                    key: "planToWatch",
-                    label: t("feed:lists.planning"),
-                    icon: "lucide:bookmark",
-                    iconClassName: "text-purple-400",
-                  },
-                  {
-                    key: "watching",
-                    label: t("feed:lists.watching"),
-                    icon: "lucide:tv-minimal-play",
-                    iconClassName: "text-chart-1",
-                  },
-                  {
-                    key: "completed",
-                    label: t("feed:lists.completed"),
-                    icon: "lucide:check-circle",
-                    iconClassName: "text-secondary",
-                  },
-                  {
-                    key: "dropped",
-                    label: t("feed:lists.dropped"),
-                    icon: "lucide:x-circle",
-                    iconClassName: "text-destructive",
-                  },
-                ] as const
-              ).map((stat) => {
-                const value = item.progressStats?.[stat.key] ?? { count: 0, percentage: 0 };
+            {(item.trailerId || item.backdrops?.length >= 1) && (
+              <Carousel className="w-full" opts={{ loop: true, align: "center" }}>
+                <CarouselContent>
+                  {item.trailerId && (
+                    <CarouselItem>
+                      <div className="relative w-full overflow-hidden pt-[56.25%]">
+                        <iframe
+                          src={`https://youtube.com/embed/${item.trailerId}`}
+                          allowFullScreen
+                          className="absolute inset-0 w-full h-full"
+                          title="Trailer"
+                        />
+                      </div>
+                    </CarouselItem>
+                  )}
+                  {item.backdrops?.map((url: string, i: number) => (
+                    <CarouselItem key={i}>
+                      <div className="relative w-full overflow-hidden pt-[56.25%]">
+                        <div
+                          className="absolute inset-0 bg-cover bg-center blur-xl scale-110"
+                          style={{ backgroundImage: `url(${url})` }}
+                          aria-hidden="true"
+                        />
+                        <ImageZoom className="absolute inset-0">
+                          <Image
+                            src={url}
+                            width={1920}
+                            height={1080}
+                            alt="Backdrop"
+                            className="absolute inset-0 w-full h-full object-contain"
+                          />
+                        </ImageZoom>
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious variant="default" className="left-2" />
+                <CarouselNext variant="default" className="right-2" />
+              </Carousel>
+            )}
+          </TabsContent>
+
+          <TabsContent value="episodes">
+            <Accordion type="single" collapsible value={openSeason} onValueChange={setOpenSeason}>
+              {seasons.map((season: any) => {
+                const seasonValue = `item-${season.seasonNumber}`;
 
                 return (
-                  <div
-                    key={stat.key}
-                    className="bg-linear-to-br from-muted/50 to-muted p-4 rounded-xl border border-border"
-                  >
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-sm font-medium text-muted-foreground">{stat.label}</span>
-                      <Icon icon={stat.icon} className={cn("size-5", stat.iconClassName)} />
-                    </div>
-                    <p className="text-2xl font-bold text-card-foreground">{value.percentage}%</p>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      {value.count} {t("library:users")}
-                    </p>
-                  </div>
+                  <AccordionItem key={season.id} value={seasonValue}>
+                    <AccordionTrigger className="cursor-pointer">
+                      <h3 className="font-semibold text-card-foreground text-lg mb-3">{season.name}</h3>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <SeasonEpisodes
+                        slug={slug}
+                        seasonNumber={season.seasonNumber}
+                        isOpen={openSeason === seasonValue}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
                 );
               })}
-            </div>
-          </div>
-
-          {item.trailerId && (
-            <iframe
-              src={`https://youtube.com/embed/${item.trailerId}`}
-              allowFullScreen
-              className="w-full aspect-video"
-              title="Trailer"
+            </Accordion>
+          </TabsContent>
+
+          <TabsContent value="lists">
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="comments">
+            <Comments
+              type="TVShow"
+              tvShowId={item.id}
+              showTitle={false}
+              containerClassName="border-0 bg-transparent p-0 shadow-none"
+              headerClassName="p-0"
+              contentClassName="p-0"
             />
-          )}
-        </TabsContent>
+          </TabsContent>
 
-        <TabsContent value="episodes">
-          <Accordion type="single" collapsible value={openSeason} onValueChange={setOpenSeason}>
-            {seasons.map((season: any) => {
-              const seasonValue = `item-${season.seasonNumber}`;
-
-              return (
-                <AccordionItem key={season.id} value={seasonValue}>
-                  <AccordionTrigger className="cursor-pointer">
-                    <h3 className="font-semibold text-card-foreground text-lg mb-3">{season.name}</h3>
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <SeasonEpisodes
-                      slug={slug}
-                      seasonNumber={season.seasonNumber}
-                      isOpen={openSeason === seasonValue}
-                    />
-                  </AccordionContent>
-                </AccordionItem>
-              );
-            })}
-          </Accordion>
-        </TabsContent>
-
-        <TabsContent value="reviews">
-          {reviews.items.length === 0 ? (
-            <Empty className="border-0">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <Icon icon="lucide:star" />
-                </EmptyMedia>
-                <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
-                <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            <div className="flex flex-col divide-y divide-border/30">
-              {reviews.items.map((review: ApiTypes.TVShowReview) => (
-                <ReviewItem
-                  key={review.id}
-                  user={review.user}
-                  reviewText={review.summary ?? ""}
-                  notes={review.notes}
-                  story={review.story}
-                  date={new Date(review.createdAt)}
-                  criteries={{
-                    all: Number(review.overall),
-                    direction: review.direction != null ? Number(review.direction) : undefined,
-                    production: review.production != null ? Number(review.production) : undefined,
-                    acting: review.acting != null ? Number(review.acting) : undefined,
-                  }}
-                  reviewId={review.id}
-                  reactions={review.reactions}
-                  onReact={(emoji, currentReaction) =>
-                    toggleReaction.mutate(
-                      { reviewId: review.id, currentReaction, emoji },
-                      { onSuccess: () => queryClient.invalidateQueries({ queryKey: ["tvReviews", item.id] }) },
-                    )
-                  }
-                  isReacting={toggleReaction.isPending && toggleReaction.variables?.reviewId === review.id}
-                />
-              ))}
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent value="lists">
-          {!listsQuery.data || listsQuery.data.items.length === 0 ? (
-            <Empty className="border-0">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <Icon icon="lucide:list" />
-                </EmptyMedia>
-                <EmptyTitle>{t("library:noLists")}</EmptyTitle>
-                <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {listsQuery.data.items.map((list) => (
-                <ListItem key={list.id} list={list} />
-              ))}
+          <TabsContent value="cast">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {item.cast?.map((cast: { character: string; name: string; profileUrl: string }) => {
+                return (
+                  <CastItem
+                    key={cast.character}
+                    name={cast.name}
+                    character={cast.character}
+                    imageUrl={cast.profileUrl}
+                  />
+                );
+              })}
             </div>
+          </TabsContent>
+        </Tabs>
+      </DetailsPageLayout>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-semibold text-card-foreground text-lg capitalize">
+            {t("library:reviews")} ({reviews?.total ?? 0})
+          </h3>
+          {isAuthenticated && (
+            <Button variant="outline" size="sm" className="shrink-0 gap-2" onClick={() => setMoreOpen(true)}>
+              <Icon icon="lucide:pen-line" className="size-4" />
+              {t("feed:review")}
+            </Button>
           )}
-        </TabsContent>
-
-        <TabsContent value="comments">
-          <Comments
-            type="TVShow"
-            tvShowId={item.id}
-            showTitle={false}
-            containerClassName="border-0 bg-transparent p-0 shadow-none"
-            headerClassName="p-0"
-            contentClassName="p-0"
-          />
-        </TabsContent>
-
-        <TabsContent value="cast">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            {item.cast?.map((cast: { character: string; name: string; profileUrl: string }) => {
-              return (
-                <CastItem key={cast.character} name={cast.name} character={cast.character} imageUrl={cast.profileUrl} />
-              );
-            })}
-          </div>
-        </TabsContent>
-
-        <TabsContent value="medias">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {item.backdrops?.map((url: string, i: number) => (
-              <ImageZoom key={i}>
-                <Image src={url} width={1920} height={1080} alt="Backdrop" />
-              </ImageZoom>
+        </div>
+        {reviews.items.length === 0 ? (
+          <Empty className="border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Icon icon="lucide:star" />
+              </EmptyMedia>
+              <EmptyTitle>{t("library:noReviews")}</EmptyTitle>
+              <EmptyDescription>{t("library:noReviewsDescription")}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="flex flex-col divide-y divide-border/30">
+            {reviews.items.map((review: ApiTypes.TVShowReview) => (
+              <ReviewItem
+                key={review.id}
+                user={review.user}
+                reviewText={review.summary ?? ""}
+                notes={review.notes}
+                story={review.story}
+                date={new Date(review.createdAt)}
+                criteries={{
+                  all: Number(review.overall),
+                  direction: review.direction != null ? Number(review.direction) : undefined,
+                  production: review.production != null ? Number(review.production) : undefined,
+                  acting: review.acting != null ? Number(review.acting) : undefined,
+                }}
+                reviewId={review.id}
+                reactions={review.reactions}
+                onReact={(emoji, currentReaction) =>
+                  toggleReaction.mutate(
+                    { reviewId: review.id, currentReaction, emoji },
+                    { onSuccess: () => queryClient.invalidateQueries({ queryKey: ["tvReviews", item.id] }) },
+                  )
+                }
+                isReacting={toggleReaction.isPending && toggleReaction.variables?.reviewId === review.id}
+              />
             ))}
           </div>
-        </TabsContent>
-      </Tabs>
-    </DetailsPageLayout>
+        )}
+      </div>
+    </>
   );
 }
 

From e2728a8832d1e34f8c65ad45a0bfd3a5cd4c21a2 Mon Sep 17 00:00:00 2001
From: Bruno Ramos <37979213+Kuriel23@users.noreply.github.com>
Date: Sun, 12 Jul 2026 01:08:19 +0100
Subject: [PATCH 2/5] feat: enhance relations display and improve emoji button
 styling

---
 index.html                                  |  2 +-
 src/components/pages/feed/activity-item.tsx |  9 ++-
 src/routes/anime/$slug.tsx                  | 11 ++--
 src/routes/game/$slug.tsx                   | 62 +++++++++++++--------
 src/routes/manga/$slug.tsx                  | 11 ++--
 5 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index dd4ed34..3590eb7 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Noto+Color+Emoji&display=swap" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/pages/feed/activity-item.tsx b/src/components/pages/feed/activity-item.tsx
index 257d9b6..b93dd0e 100644
--- a/src/components/pages/feed/activity-item.tsx
+++ b/src/components/pages/feed/activity-item.tsx
@@ -114,13 +114,18 @@ export function ActivityItem({ profile, item, onReact, isReacting = false }: fee
                         onClick={() => onReact?.(emoji, currentReaction)}
                         disabled={isReacting || !currentUserId}
                         aria-pressed={active}
-                        className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-sm transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
+                        className={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-sm transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
                           active
                             ? "border-primary bg-primary/10 text-primary"
                             : "border-border/50 hover:border-primary/50 hover:bg-muted"
                         }`}
                       >
-                        <span className="leading-none">{emoji}</span>
+                        <span
+                          className="text-base leading-none"
+                          style={{ fontFamily: "'Noto Color Emoji', sans-serif" }}
+                        >
+                          {emoji}
+                        </span>
                         {count > 0 && <span className="text-xs text-muted-foreground">{count}</span>}
                       </button>
                     );
diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index c96e51b..762a388 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -297,7 +297,6 @@ function AnimeDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
               {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
                 <TabsTrigger value="episodes">{t("library:episode_other")}</TabsTrigger>
               )}
@@ -385,6 +384,13 @@ function AnimeDetailsRoute() {
               </Grid>
             </div>
 
+            {anime.relations?.nodes?.length > 0 || anime.relations?.edges?.length > 0 ? (
+              <div>
+                <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:relations")}</h3>
+                <Relations nodes={anime.relations.nodes} edges={anime.relations.edges} />
+              </div>
+            ) : null}
+
             {isAuthenticated && <AnimeEpisodeProgress season={mySeason} onToggle={handleToggle} />}
 
             <div>
@@ -447,9 +453,6 @@ function AnimeDetailsRoute() {
               </Grid>
             </TabsContent>
           )}
-          <TabsContent value="relations">
-            <Relations nodes={[]} edges={[]} />
-          </TabsContent>
           <TabsContent value="lists">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <ListItem
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 00a78b9..83a1b70 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@iconify/react";
 import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { Image } from "@unpic/react";
 import { t } from "i18next";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -352,18 +353,6 @@ function GameDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              {(game.parentGame?.id ||
-                (game.prequels?.length ?? 0) > 0 ||
-                (game.expandedGames?.length ?? 0) > 0 ||
-                (game.sequels?.length ?? 0) > 0 ||
-                (game.dlcs?.length ?? 0) > 0 ||
-                (game.expansions?.length ?? 0) > 0 ||
-                (game.ports?.length ?? 0) > 0 ||
-                (game.remakes?.length ?? 0) > 0 ||
-                (game.remasters?.length ?? 0) > 0 ||
-                (game.bundles?.length ?? 0) > 0) && (
-                <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
-              )}
               <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
               {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
                 <TabsTrigger value="screenshots">
@@ -431,6 +420,17 @@ function GameDetailsRoute() {
               </div>
             </div>
 
+            {(() => {
+              const { nodes, edges } = buildRelationsData(game);
+              if (edges.length === 0) return null;
+              return (
+                <div>
+                  <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:relations")}</h3>
+                  <Relations nodes={nodes} edges={edges} />
+                </div>
+              );
+            })()}
+
             <div>
               <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
               <CommunityStats
@@ -457,21 +457,43 @@ function GameDetailsRoute() {
                 ]}
               />
             </div>
-            <Carousel className="w-full px-4" opts={{ loop: true, align: "center" }}>
+            <Carousel className="w-full" opts={{ loop: true, align: "center" }}>
               <CarouselContent>
                 {game.videos.map((video: { checksum: string; videoId: string; name: string }) => (
                   <CarouselItem key={video.checksum}>
-                    <iframe src={video.videoId} allowFullScreen className="w-full aspect-video" title={video.name} />
+                    <div className="relative w-full overflow-hidden pt-[56.25%]">
+                      <iframe
+                        src={video.videoId}
+                        allowFullScreen
+                        className="w-full inset-0 absolute h-full"
+                        title={video.name}
+                      />
+                    </div>
                   </CarouselItem>
                 ))}
                 {game.screenshots.map((screenshot: { checksum: string; imageId: string }) => (
                   <CarouselItem key={screenshot.checksum}>
-                    <img src={screenshot.imageId} className="w-full aspect-video object-cover" alt="Screenshot" />
+                    <div className="relative w-full overflow-hidden pt-[56.25%]">
+                      <div
+                        className="absolute inset-0 bg-cover bg-center blur-xl scale-110"
+                        style={{ backgroundImage: `url(${screenshot.imageId})` }}
+                        aria-hidden="true"
+                      />
+                      <ImageZoom className="absolute inset-0">
+                        <Image
+                          src={screenshot.imageId}
+                          width={1920}
+                          height={1080}
+                          alt="Screenshot"
+                          className="absolute inset-0 w-full h-full object-contain"
+                        />
+                      </ImageZoom>
+                    </div>
                   </CarouselItem>
                 ))}
               </CarouselContent>
-              <CarouselPrevious variant="default" className="-left-6" />
-              <CarouselNext variant="default" className="-right-6" />
+              <CarouselPrevious variant="default" className="left-2" />
+              <CarouselNext variant="default" className="right-2" />
             </Carousel>
           </TabsContent>
           <TabsContent value="lists">
@@ -488,12 +510,6 @@ function GameDetailsRoute() {
               />
             </div>
           </TabsContent>
-          <TabsContent value="relations">
-            {(() => {
-              const { nodes, edges } = buildRelationsData(game);
-              return <Relations nodes={nodes} edges={edges} />;
-            })()}
-          </TabsContent>
           {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
             <TabsContent value="screenshots">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index 46eadb4..2067dd1 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -272,7 +272,6 @@ function MangaDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="relations">{t("library:relations")}</TabsTrigger>
               <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
               <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
             </TabsList>
@@ -349,6 +348,13 @@ function MangaDetailsRoute() {
               </Grid>
             </div>
 
+            {manga.relations?.nodes?.length > 0 || manga.relations?.edges?.length > 0 ? (
+              <div>
+                <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:relations")}</h3>
+                <Relations nodes={manga.relations.nodes} edges={manga.relations.edges} />
+              </div>
+            ) : null}
+
             <div>
               <h3 className="font-semibold text-card-foreground text-lg mb-4">{t("library:communityStatistics")}</h3>
               <CommunityStats
@@ -381,9 +387,6 @@ function MangaDetailsRoute() {
               />
             </div>
           </TabsContent>
-          <TabsContent value="relations">
-            <Relations nodes={[]} edges={[]} />
-          </TabsContent>
           <TabsContent value="lists">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <ListItem

From 84b1c22f9884af24e156ffb13f3088fa8f7394d4 Mon Sep 17 00:00:00 2001
From: Bruno Ramos <37979213+Kuriel23@users.noreply.github.com>
Date: Sun, 12 Jul 2026 16:43:31 +0100
Subject: [PATCH 3/5] feat: add custom list management for anime, books, games,
 manga, movies, and TV shows

---
 src/routes/anime/$slug.tsx | 161 +++++++++++++++++++++++++++++++++----
 src/routes/book/$slug.tsx  | 161 +++++++++++++++++++++++++++++++++----
 src/routes/game/$slug.tsx  | 161 +++++++++++++++++++++++++++++++++----
 src/routes/manga/$slug.tsx | 161 +++++++++++++++++++++++++++++++++----
 src/routes/movie/$slug.tsx | 119 ++++++++++++++++++++++++++-
 src/routes/tv/$slug.tsx    | 117 ++++++++++++++++++++++++++-
 6 files changed, 822 insertions(+), 58 deletions(-)

diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index 762a388..7c64135 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -23,7 +23,10 @@ import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { EpisodicContentModal } from "@/components/shared/modals/episodic-content";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -112,6 +115,77 @@ function AnimeDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const userId = session?.data?.user?.id;
+  const [newListName, setNewListName] = useState("");
+
+  const listsQuery = useQuery<ApiTypes.PaginatedResponse<ApiTypes.ListWithPreview>>({
+    queryKey: ["animeContainingLists", anime?.id],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsContainingItemResponse>(apiEndpoints.getListsContainingItem, {
+          params: { type: "Anime", animeId: anime?.id, itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists),
+    enabled: !!anime?.id,
+  });
+
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["animeLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Anime", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["animeListStatus", anime?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "Anime", animeId: anime?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!anime?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "Anime", listId, userId, animeId: anime?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["animeListStatus", anime?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["animeContainingLists", anime?.id] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "Anime" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Anime", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "Anime", listId: newList.id, userId, animeId: anime?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["animeLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["animeListStatus", anime?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["animeContainingLists", anime?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
   if (isLoading) return <LoadingDetails />;
   if (isError || !anime) return <ErrorComponent />;
 
@@ -302,7 +376,7 @@ function AnimeDetailsRoute() {
               )}
               <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
               <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
@@ -453,19 +527,78 @@ function AnimeDetailsRoute() {
               </Grid>
             </TabsContent>
           )}
-          <TabsContent value="lists">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <ListItem
-                list={
-                  {
-                    _count: { listItems: 0 },
-                    listItems: [],
-                    name: "",
-                    user: { name: "", profile: null },
-                  } as unknown as ApiTypes.ListWithPreview
-                }
-              />
-            </div>
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
           </TabsContent>
           <TabsContent value="cast">
             <Grid minColSize={"150px"} className="gap-4">
diff --git a/src/routes/book/$slug.tsx b/src/routes/book/$slug.tsx
index 54d8572..372c81e 100644
--- a/src/routes/book/$slug.tsx
+++ b/src/routes/book/$slug.tsx
@@ -18,7 +18,10 @@ import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { BookModal } from "@/components/shared/modals/book";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -84,7 +87,78 @@ function BookDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const userId = session?.data?.user?.id;
   const [moreOpen, setMoreOpen] = useState(false);
+  const [newListName, setNewListName] = useState("");
+
+  const listsQuery = useQuery<ApiTypes.PaginatedResponse<ApiTypes.ListWithPreview>>({
+    queryKey: ["bookContainingLists", book?.id],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsContainingItemResponse>(apiEndpoints.getListsContainingItem, {
+          params: { type: "Book", bookId: book?.id, itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists),
+    enabled: !!book?.id,
+  });
+
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["bookLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Book", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["bookListStatus", book?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "Book", bookId: book?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!book?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "Book", listId, userId, bookId: book?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["bookListStatus", book?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["bookContainingLists", book?.id] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "Book" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Book", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "Book", listId: newList.id, userId, bookId: book?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["bookLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["bookListStatus", book?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["bookContainingLists", book?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
   if (isLoading || reviewsData.isLoading) return <LoadingDetails />;
   if (isError || reviewsData.isError || !book) return <ErrorComponent />;
 
@@ -219,7 +293,7 @@ function BookDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
@@ -314,19 +388,78 @@ function BookDetailsRoute() {
               </div>
             </div>
           </TabsContent>
-          <TabsContent value="lists">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <ListItem
-                list={
-                  {
-                    _count: { listItems: 0 },
-                    listItems: [],
-                    name: "",
-                    user: { name: "", profile: null },
-                  } as unknown as ApiTypes.ListWithPreview
-                }
-              />
-            </div>
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
           </TabsContent>
         </Tabs>
       </DetailsPageLayout>
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 83a1b70..435ef9b 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -23,8 +23,11 @@ import { GameModal } from "@/components/shared/modals/game";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { Button } from "@/components/ui/button";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -221,6 +224,77 @@ function GameDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const userId = session?.data?.user?.id;
+  const [newListName, setNewListName] = useState("");
+
+  const listsQuery = useQuery<ApiTypes.PaginatedResponse<ApiTypes.ListWithPreview>>({
+    queryKey: ["gameContainingLists", game?.id],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsContainingItemResponse>(apiEndpoints.getListsContainingItem, {
+          params: { type: "Game", gameId: game?.id, itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists),
+    enabled: !!game?.id,
+  });
+
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["gameLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Game", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["gameListStatus", game?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "Game", gameId: game?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!game?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "Game", listId, userId, gameId: game?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["gameListStatus", game?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["gameContainingLists", game?.id] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "Game" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Game", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "Game", listId: newList.id, userId, gameId: game?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["gameLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["gameListStatus", game?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["gameContainingLists", game?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
   if (isLoading || reviewsQuery.isLoading) return <LoadingDetails />;
   if (isError || reviewsQuery.isError || !game) return <ErrorComponent />;
 
@@ -353,7 +427,7 @@ function GameDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
               {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
                 <TabsTrigger value="screenshots">
                   {t("library:screenshots")} ({screenshots?.length ?? 0})
@@ -496,19 +570,78 @@ function GameDetailsRoute() {
               <CarouselNext variant="default" className="right-2" />
             </Carousel>
           </TabsContent>
-          <TabsContent value="lists">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <ListItem
-                list={
-                  {
-                    _count: { listItems: 0 },
-                    listItems: [],
-                    name: "",
-                    user: { name: "", profile: null },
-                  } as unknown as ApiTypes.ListWithPreview
-                }
-              />
-            </div>
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
           </TabsContent>
           {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
             <TabsContent value="screenshots">
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index 2067dd1..bda6c1f 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -21,7 +21,10 @@ import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
 import { MangaModal } from "@/components/shared/modals/manga";
 import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
 import { useSession } from "@/lib/auth.ts";
@@ -88,7 +91,78 @@ function MangaDetailsRoute() {
 
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
+  const userId = session?.data?.user?.id;
   const [moreOpen, setMoreOpen] = useState(false);
+  const [newListName, setNewListName] = useState("");
+
+  const listsQuery = useQuery<ApiTypes.PaginatedResponse<ApiTypes.ListWithPreview>>({
+    queryKey: ["mangaContainingLists", manga?.id],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsContainingItemResponse>(apiEndpoints.getListsContainingItem, {
+          params: { type: "Manga", mangaId: manga?.id, itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists),
+    enabled: !!manga?.id,
+  });
+
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["mangaLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Manga", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["mangaListStatus", manga?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "Manga", mangaId: manga?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!manga?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "Manga", listId, userId, mangaId: manga?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["mangaListStatus", manga?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["mangaContainingLists", manga?.id] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "Manga" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Manga", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "Manga", listId: newList.id, userId, mangaId: manga?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["mangaLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["mangaListStatus", manga?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["mangaContainingLists", manga?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
   if (isLoading || reviewsData.isLoading) return <LoadingDetails />;
   if (isError || reviewsData.isError || !manga) return <ErrorComponent />;
 
@@ -273,7 +347,7 @@ function MangaDetailsRoute() {
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
               <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} (30)</TabsTrigger>
+              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
@@ -387,19 +461,78 @@ function MangaDetailsRoute() {
               />
             </div>
           </TabsContent>
-          <TabsContent value="lists">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <ListItem
-                list={
-                  {
-                    _count: { listItems: 0 },
-                    listItems: [],
-                    name: "",
-                    user: { name: "", profile: null },
-                  } as unknown as ApiTypes.ListWithPreview
-                }
-              />
-            </div>
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <Icon icon="lucide:list" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t("library:noLists")}</EmptyTitle>
+                  <EmptyDescription>{t("library:noListsDescription")}</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {listsQuery.data.items.map((list) => (
+                  <ListItem key={list.id} list={list} />
+                ))}
+              </div>
+            )}
           </TabsContent>
           <TabsContent value="characters">
             <Grid minColSize={"150px"} className="gap-4">
diff --git a/src/routes/movie/$slug.tsx b/src/routes/movie/$slug.tsx
index 259d3b6..8ea6477 100644
--- a/src/routes/movie/$slug.tsx
+++ b/src/routes/movie/$slug.tsx
@@ -24,8 +24,11 @@ import { RefreshData } from "@/components/shared/modals/refresh-data";
 import { StarRating } from "@/components/shared/star-rating";
 import { Button } from "@/components/ui/button";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToggleReviewReaction } from "@/hooks/review";
@@ -105,6 +108,7 @@ function MovieDetailsRoute() {
   const userId = session?.data?.user?.id;
 
   const [moreOpen, setMoreOpen] = useState(false);
+  const [newListName, setNewListName] = useState("");
 
   const toggleReaction = useToggleReviewReaction("movie", userId ?? "");
 
@@ -150,6 +154,64 @@ function MovieDetailsRoute() {
     },
   });
 
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["movieLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Movie", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["movieListStatus", movie?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "Movie", movieId: movie?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!movie?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "Movie", listId, userId, movieId: movie?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["movieListStatus", movie?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["movieContainingLists", movie?.id] });
+      queryClient.invalidateQueries({ queryKey: ["movie"] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "Movie" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "Movie", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "Movie", listId: newList.id, userId, movieId: movie?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["movieLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["movieListStatus", movie?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["movieContainingLists", movie?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
   const progressQuery = useQuery<MovieProgress | null>({
     queryKey: ["movieProgress", movie?.id, userId],
     queryFn: () =>
@@ -518,7 +580,62 @@ function MovieDetailsRoute() {
               </Carousel>
             )}
           </TabsContent>
-          <TabsContent value="lists">
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+
             {!listsQuery.data || listsQuery.data.items.length === 0 ? (
               <Empty className="border-0">
                 <EmptyHeader>
diff --git a/src/routes/tv/$slug.tsx b/src/routes/tv/$slug.tsx
index 1ab56ee..d32f6d3 100644
--- a/src/routes/tv/$slug.tsx
+++ b/src/routes/tv/$slug.tsx
@@ -23,9 +23,12 @@ import { StarRating } from "@/components/shared/star-rating.tsx";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { ImageZoom } from "@/components/ui/image-zoom";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToggleReviewReaction } from "@/hooks/review";
@@ -120,6 +123,64 @@ function TVShowDetailsPage() {
   const session = useSession();
   const isAuthenticated = !!session?.data?.session;
   const userId = session?.data?.user?.id;
+  const [newListName, setNewListName] = useState("");
+
+  const userListsQuery = useQuery<ApiTypes.List[]>({
+    queryKey: ["tvLists", userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "TVShow", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items),
+    enabled: isAuthenticated && !!userId,
+  });
+
+  const listStatusQuery = useQuery<string[]>({
+    queryKey: ["tvListStatus", item?.id, userId],
+    queryFn: () =>
+      api
+        .get<ApiTypes.GetListStatusResponse>(apiEndpoints.getListStatus, {
+          params: { type: "TVShow", tvShowId: item?.id },
+        })
+        .then(({ data }) => data.listIds),
+    enabled: isAuthenticated && !!userId && !!item?.id,
+  });
+
+  const toggleListMutation = useMutation({
+    mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+      const body = { type: "TVShow", listId, userId, tvShowId: item?.id };
+      return isMember
+        ? api.delete(apiEndpoints.listItem(listId), { data: body })
+        : api.post(apiEndpoints.listItem(listId), body);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tvListStatus", item?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["tvContainingLists", item?.id] });
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
+
+  const createAndAddListMutation = useMutation({
+    mutationFn: async (name: string) => {
+      await api.post(apiEndpoints.list, { name, userId, type: "TVShow" });
+      const freshLists = await api
+        .get<ApiTypes.GetListsByUserIdResponse>(apiEndpoints.getListsByUserId(userId as string), {
+          params: { type: "TVShow", itemsPerPage: 50 },
+        })
+        .then(({ data }) => data.lists.items);
+      const newList = [...freshLists].reverse().find((l) => l.name === name);
+      if (!newList) throw new Error("List not found after creation");
+      await api.post(apiEndpoints.listItem(newList.id), { type: "TVShow", listId: newList.id, userId, tvShowId: item?.id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tvLists", userId] });
+      queryClient.invalidateQueries({ queryKey: ["tvListStatus", item?.id, userId] });
+      queryClient.invalidateQueries({ queryKey: ["tvContainingLists", item?.id] });
+      setNewListName("");
+    },
+    onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+  });
 
   const toggleReaction = useToggleReviewReaction("tv", userId ?? "");
 
@@ -804,7 +865,61 @@ function TVShowDetailsPage() {
             </Accordion>
           </TabsContent>
 
-          <TabsContent value="lists">
+          <TabsContent value="lists" className="space-y-4">
+            {isAuthenticated && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-1.5">
+                    <Icon icon="lucide:list-plus" className="size-3.5" />
+                    {t("feed:customLists")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-56 p-2 space-y-2">
+                  <div className="flex items-center gap-1.5 pb-1.5 border-b border-border">
+                    <Input
+                      value={newListName}
+                      onChange={(e) => setNewListName(e.target.value)}
+                      placeholder={t("feed:newList")}
+                      className="h-7 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && newListName.trim()) {
+                          createAndAddListMutation.mutate(newListName.trim());
+                        }
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      className="size-7 shrink-0"
+                      disabled={!newListName.trim() || createAndAddListMutation.isPending}
+                      onClick={() => createAndAddListMutation.mutate(newListName.trim())}
+                    >
+                      <Icon icon="lucide:plus" className="size-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-0.5">
+                    {userListsQuery.data?.map((list) => {
+                      const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+                      return (
+                        <label
+                          key={list.id}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted cursor-pointer text-sm select-none"
+                        >
+                          <Checkbox
+                            checked={isMember}
+                            disabled={toggleListMutation.isPending}
+                            onCheckedChange={() => toggleListMutation.mutate({ listId: list.id, isMember })}
+                          />
+                          {list.name}
+                        </label>
+                      );
+                    })}
+                    {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+                      <p className="text-sm text-muted-foreground px-2 py-1.5">{t("library:noLists")}</p>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
             {!listsQuery.data || listsQuery.data.items.length === 0 ? (
               <Empty className="border-0">
                 <EmptyHeader>

From ddaf2e9584443f5970ca405ef20fe8bcafe67499 Mon Sep 17 00:00:00 2001
From: Bruno Ramos <37979213+Kuriel23@users.noreply.github.com>
Date: Sun, 12 Jul 2026 16:49:08 +0100
Subject: [PATCH 4/5] format: biome

---
 src/routes/anime/$slug.tsx | 11 +++++++++--
 src/routes/book/$slug.tsx  |  4 +++-
 src/routes/game/$slug.tsx  |  4 +++-
 src/routes/manga/$slug.tsx | 11 +++++++++--
 src/routes/movie/$slug.tsx |  7 ++++++-
 src/routes/tv/$slug.tsx    |  7 ++++++-
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index 7c64135..7c53a57 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -175,7 +175,12 @@ function AnimeDetailsRoute() {
         .then(({ data }) => data.lists.items);
       const newList = [...freshLists].reverse().find((l) => l.name === name);
       if (!newList) throw new Error("List not found after creation");
-      await api.post(apiEndpoints.listItem(newList.id), { type: "Anime", listId: newList.id, userId, animeId: anime?.id });
+      await api.post(apiEndpoints.listItem(newList.id), {
+        type: "Anime",
+        listId: newList.id,
+        userId,
+        animeId: anime?.id,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["animeLists", userId] });
@@ -376,7 +381,9 @@ function AnimeDetailsRoute() {
               )}
               <TabsTrigger value="cast">{t("library:cast")}</TabsTrigger>
               <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
diff --git a/src/routes/book/$slug.tsx b/src/routes/book/$slug.tsx
index 372c81e..4903db9 100644
--- a/src/routes/book/$slug.tsx
+++ b/src/routes/book/$slug.tsx
@@ -293,7 +293,9 @@ function BookDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 435ef9b..5b79496 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -427,7 +427,9 @@ function GameDetailsRoute() {
           <div className="flex items-center justify-between gap-3 mb-2">
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
               {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
                 <TabsTrigger value="screenshots">
                   {t("library:screenshots")} ({screenshots?.length ?? 0})
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index bda6c1f..ac537f5 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -152,7 +152,12 @@ function MangaDetailsRoute() {
         .then(({ data }) => data.lists.items);
       const newList = [...freshLists].reverse().find((l) => l.name === name);
       if (!newList) throw new Error("List not found after creation");
-      await api.post(apiEndpoints.listItem(newList.id), { type: "Manga", listId: newList.id, userId, mangaId: manga?.id });
+      await api.post(apiEndpoints.listItem(newList.id), {
+        type: "Manga",
+        listId: newList.id,
+        userId,
+        mangaId: manga?.id,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["mangaLists", userId] });
@@ -347,7 +352,9 @@ function MangaDetailsRoute() {
             <TabsList className="w-full max-sm:overflow-x-auto items-center justify-start">
               <TabsTrigger value="info">{t("library:info")}</TabsTrigger>
               <TabsTrigger value="characters">{t("library:characters")}</TabsTrigger>
-              <TabsTrigger value="lists">{t("library:lists")} ({listsQuery.data?.total ?? 0})</TabsTrigger>
+              <TabsTrigger value="lists">
+                {t("library:lists")} ({listsQuery.data?.total ?? 0})
+              </TabsTrigger>
             </TabsList>
           </div>
           <TabsContent value="info" className="space-y-5">
diff --git a/src/routes/movie/$slug.tsx b/src/routes/movie/$slug.tsx
index 8ea6477..ba008da 100644
--- a/src/routes/movie/$slug.tsx
+++ b/src/routes/movie/$slug.tsx
@@ -201,7 +201,12 @@ function MovieDetailsRoute() {
         .then(({ data }) => data.lists.items);
       const newList = [...freshLists].reverse().find((l) => l.name === name);
       if (!newList) throw new Error("List not found after creation");
-      await api.post(apiEndpoints.listItem(newList.id), { type: "Movie", listId: newList.id, userId, movieId: movie?.id });
+      await api.post(apiEndpoints.listItem(newList.id), {
+        type: "Movie",
+        listId: newList.id,
+        userId,
+        movieId: movie?.id,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["movieLists", userId] });
diff --git a/src/routes/tv/$slug.tsx b/src/routes/tv/$slug.tsx
index d32f6d3..25791cd 100644
--- a/src/routes/tv/$slug.tsx
+++ b/src/routes/tv/$slug.tsx
@@ -171,7 +171,12 @@ function TVShowDetailsPage() {
         .then(({ data }) => data.lists.items);
       const newList = [...freshLists].reverse().find((l) => l.name === name);
       if (!newList) throw new Error("List not found after creation");
-      await api.post(apiEndpoints.listItem(newList.id), { type: "TVShow", listId: newList.id, userId, tvShowId: item?.id });
+      await api.post(apiEndpoints.listItem(newList.id), {
+        type: "TVShow",
+        listId: newList.id,
+        userId,
+        tvShowId: item?.id,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["tvLists", userId] });

From 861ed585c36bc3e821e7bc7e4a11e018dd3e8ded Mon Sep 17 00:00:00 2001
From: Bruno Ramos <37979213+Kuriel23@users.noreply.github.com>
Date: Sun, 12 Jul 2026 17:29:39 +0100
Subject: [PATCH 5/5] fix: handle undefined reviews and add sandbox attributes
 to iframes

---
 src/routes/anime/$slug.tsx | 3 ++-
 src/routes/book/$slug.tsx  | 2 +-
 src/routes/game/$slug.tsx  | 1 +
 src/routes/manga/$slug.tsx | 4 ++--
 src/routes/movie/$slug.tsx | 3 ++-
 src/routes/tv/$slug.tsx    | 3 ++-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index 7c53a57..4023950 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -366,7 +366,7 @@ function AnimeDetailsRoute() {
               </div>
               <span className="font-semibold text-card-foreground">{rating}</span>
               <span className="text-muted-foreground">
-                ({reviews.total} {t("library:reviews")})
+                ({reviews?.total ?? 0} {t("library:reviews")})
               </span>
             </div>
           )}
@@ -511,6 +511,7 @@ function AnimeDetailsRoute() {
                 src={anime.trailer.embedUrl.replace("&autoplay=1", "")}
                 allowFullScreen
                 className="w-full aspect-video"
+                sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                 title="Trailer"
               />
             )}
diff --git a/src/routes/book/$slug.tsx b/src/routes/book/$slug.tsx
index 4903db9..6924d02 100644
--- a/src/routes/book/$slug.tsx
+++ b/src/routes/book/$slug.tsx
@@ -274,7 +274,7 @@ function BookDetailsRoute() {
               </div>
               <span className="font-semibold text-card-foreground">{rating}</span>
               <span className="text-muted-foreground">
-                ({reviews.total} {t("library:reviews")})
+                ({reviews?.total ?? 0} {t("library:reviews")})
               </span>
             </div>
           )}
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 5b79496..3f3d786 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -542,6 +542,7 @@ function GameDetailsRoute() {
                         src={video.videoId}
                         allowFullScreen
                         className="w-full inset-0 absolute h-full"
+                        sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                         title={video.name}
                       />
                     </div>
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index ac537f5..1cad054 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -341,7 +341,7 @@ function MangaDetailsRoute() {
               </div>
               <span className="font-semibold text-card-foreground">{rating}</span>
               <span className="text-muted-foreground">
-                ({reviews.total} {t("library:reviews")})
+                ({reviews?.total ?? 0} {t("library:reviews")})
               </span>
             </div>
           )}
@@ -407,7 +407,7 @@ function MangaDetailsRoute() {
                     title={t("library:authors")}
                     icon={<Icon icon={"lucide:pen"} className="size-5 text-muted-foreground" />}
                     description={manga.authors.map((au: { name: string; malId: number }, index: number) => (
-                      <Link to="/" key={au.malId} search={{ landing: "true " }}>
+                      <Link to="/" key={au.malId} search={{ landing: "true" }}>
                         {au.name}
                         {index < manga.authors.length - 1 && "; "}
                       </Link>
diff --git a/src/routes/movie/$slug.tsx b/src/routes/movie/$slug.tsx
index ba008da..b32ca3f 100644
--- a/src/routes/movie/$slug.tsx
+++ b/src/routes/movie/$slug.tsx
@@ -417,7 +417,7 @@ function MovieDetailsRoute() {
             <StarRating value={rating} className="mr-1" />
             <span className="font-semibold text-card-foreground">{rating}</span>
             <span className="text-muted-foreground">
-              ({reviews.total} {t("library:reviews")})
+              ({reviews?.total ?? 0} {t("library:reviews")})
             </span>
           </div>
         </div>
@@ -560,6 +560,7 @@ function MovieDetailsRoute() {
                           src={`https://youtube.com/embed/${movie.trailerId}`}
                           allowFullScreen
                           className="absolute inset-0 w-full h-full"
+                          sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                           title="Trailer"
                         />
                       </div>
diff --git a/src/routes/tv/$slug.tsx b/src/routes/tv/$slug.tsx
index 25791cd..3c41192 100644
--- a/src/routes/tv/$slug.tsx
+++ b/src/routes/tv/$slug.tsx
@@ -609,7 +609,7 @@ function TVShowDetailsPage() {
             <StarRating value={rating} className="mr-1" />
             <span className="font-semibold text-card-foreground">{rating}</span>
             <span className="text-muted-foreground">
-              ({reviews.total} {t("library:reviews")})
+              ({reviews?.total ?? 0} {t("library:reviews")})
             </span>
           </div>
         </div>
@@ -815,6 +815,7 @@ function TVShowDetailsPage() {
                           src={`https://youtube.com/embed/${item.trailerId}`}
                           allowFullScreen
                           className="absolute inset-0 w-full h-full"
+                          sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                           title="Trailer"
                         />
                       </div>