diff --git a/apps/web/src/app/[lang]/[username]/_components/user-items-list.tsx b/apps/web/src/app/[lang]/[username]/_components/user-items-list.tsx
index 0c42d0609..1a51ea71f 100644
--- a/apps/web/src/app/[lang]/[username]/_components/user-items-list.tsx
+++ b/apps/web/src/app/[lang]/[username]/_components/user-items-list.tsx
@@ -7,6 +7,7 @@ import { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { v4 } from 'uuid'
 import { getUserItems, useGetUserItemsInfinite } from '@/api/user-items'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { useSession } from '@/context/session'
 import { tmdbImage } from '@/utils/tmdb/image'
@@ -70,7 +71,7 @@ export function UserItemsList({ filters }: UserItemsProps) {
           key={id}
           href={`/${language}/${mediaType === 'MOVIE' ? 'movies' : 'tv-series'}/${tmdbId}`}
         >
-          {posterPath && (
+          {posterPath ? (
             <Image
               fill
               className="z-10 object-fill"
@@ -78,6 +79,8 @@ export function UserItemsList({ filters }: UserItemsProps) {
               alt={title}
               sizes="100%"
             />
+          ) : (
+            <PosterFallback title={title} />
           )}
         </Link>
       ))}
diff --git a/apps/web/src/app/[lang]/[username]/stats/_most_watched-series.tsx b/apps/web/src/app/[lang]/[username]/stats/_most_watched-series.tsx
index f144a51f3..035f6578c 100644
--- a/apps/web/src/app/[lang]/[username]/stats/_most_watched-series.tsx
+++ b/apps/web/src/app/[lang]/[username]/stats/_most_watched-series.tsx
@@ -51,12 +51,10 @@ export function MostWatchedSeries() {
               key={id}
             >
               <PosterCard.Root>
-                {posterPath && (
-                  <PosterCard.Image
-                    src={tmdbImage(posterPath, 'w500')}
-                    alt={title}
-                  />
-                )}
+                <PosterCard.Image
+                  src={posterPath ? tmdbImage(posterPath, 'w500') : ''}
+                  alt={title}
+                />
 
                 <p className="text-xs text-muted-foreground text-center lowercase">
                   {episodes} {dictionary.episodes}
diff --git a/apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-item-card.tsx b/apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-item-card.tsx
index f91960943..c23f1db0a 100644
--- a/apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-item-card.tsx
+++ b/apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-item-card.tsx
@@ -5,6 +5,7 @@ import { CSS } from '@dnd-kit/utilities'
 import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import type { GetListItemsByListId200Item } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { tmdbImage } from '@/utils/tmdb/image'
@@ -43,7 +44,7 @@ export const ListItemCard = ({
         {...props}
       >
         <div className="relative aspect-poster w-full overflow-hidden rounded-md border bg-background/50 shadow">
-          {posterPath && (
+          {posterPath ? (
             <Image
               fill
               className="z-10 object-fill"
@@ -51,6 +52,8 @@ export const ListItemCard = ({
               alt={title}
               sizes="100%"
             />
+          ) : (
+            <PosterFallback title={title} />
           )}
         </div>
       </div>
@@ -65,7 +68,7 @@ export const ListItemCard = ({
       {...props}
     >
       <div className="relative aspect-poster w-full overflow-hidden rounded-md border bg-background/50 shadow">
-        {posterPath && (
+        {posterPath ? (
           <Image
             fill
             className="z-10 object-fill"
@@ -73,6 +76,8 @@ export const ListItemCard = ({
             alt={title}
             sizes="100%"
           />
+        ) : (
+          <PosterFallback title={title} />
         )}
 
         <div
diff --git a/apps/web/src/app/[lang]/movies/[id]/_components/movie-details.tsx b/apps/web/src/app/[lang]/movies/[id]/_components/movie-details.tsx
index 951b97112..6e43da14f 100644
--- a/apps/web/src/app/[lang]/movies/[id]/_components/movie-details.tsx
+++ b/apps/web/src/app/[lang]/movies/[id]/_components/movie-details.tsx
@@ -5,6 +5,7 @@ import { BreadcrumbJsonLd, MovieJsonLd } from '@/components/structured-data'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
 import { tmdbImage } from '@/utils/tmdb/image'
+import { APP_URL } from '../../../../../../constants'
 import { MovieCollection } from './movie-collection'
 import { MovieInfos } from './movie-infos'
 import { MovieTabs } from './movie-tabs'
@@ -16,6 +17,12 @@ type MovieDetailsProps = {
 
 export const MovieDetails = async ({ id, language }: MovieDetailsProps) => {
   const movie = await tmdb.movies.details(id, language)
+  const backdropUrl = movie.backdrop_path
+    ? tmdbImage(movie.backdrop_path)
+    : undefined
+  const posterUrl = movie.poster_path ? tmdbImage(movie.poster_path) : undefined
+  const structuredDataImage =
+    backdropUrl ?? posterUrl ?? `${APP_URL}/logo-black.png`
 
   return (
     <div className="relative mx-auto max-w-6xl">
@@ -35,12 +42,12 @@ export const MovieDetails = async ({ id, language }: MovieDetailsProps) => {
       <MovieJsonLd
         name={movie.title}
         description={movie.overview}
-        image={tmdbImage(movie.backdrop_path)}
+        image={structuredDataImage}
         datePublished={movie.release_date}
         rating={movie.vote_average}
         url={`https://plotwist.app/${language}/movies/${id}`}
       />
-      <Banner url={tmdbImage(movie.backdrop_path)} />
+      <Banner url={backdropUrl} posterUrl={posterUrl} title={movie.title} />
 
       <section className="mx-auto my-8 max-w-4xl space-y-6">
         <MovieInfos movie={movie} language={language} />
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index 816d2162d..cfd250f25 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -4,6 +4,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
 import { Bookmark, Check, Eye, Pointer, X as XIcon } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
@@ -194,7 +195,7 @@ function ExitCard({
       style={{ zIndex: 20 }}
     >
       <div className="relative h-full w-full overflow-hidden rounded-[32px] border border-border/30 shadow-xl shadow-black/20">
-        {movie.poster_path && (
+        {movie.poster_path ? (
           <Image
             src={tmdbImage(movie.poster_path, 'w500')}
             alt={movie.title}
@@ -202,6 +203,8 @@ function ExitCard({
             className="object-cover"
             sizes="(max-width: 640px) 70vw, 280px"
           />
+        ) : (
+          <PosterFallback title={movie.title} />
         )}
       </div>
     </motion.div>
@@ -568,7 +571,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
                   zIndex: 3 - stackIdx,
                 }}
               >
-                {movie.poster_path && (
+                {movie.poster_path ? (
                   <Image
                     src={tmdbImage(movie.poster_path, 'w500')}
                     alt={movie.title}
@@ -576,6 +579,8 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
                     className="object-cover"
                     sizes="280px"
                   />
+                ) : (
+                  <PosterFallback title={movie.title} />
                 )}
               </div>
             )
diff --git a/apps/web/src/app/[lang]/people/[id]/_credits-page.tsx b/apps/web/src/app/[lang]/people/[id]/_credits-page.tsx
index ba0240f48..4dfaf74a5 100644
--- a/apps/web/src/app/[lang]/people/[id]/_credits-page.tsx
+++ b/apps/web/src/app/[lang]/people/[id]/_credits-page.tsx
@@ -79,12 +79,10 @@ export function CreditsPage({ roles, credits }: CreditsPageProps) {
                 <TooltipTrigger>
                   <PosterCard.Root>
                     <Link href={href}>
-                      {credit.poster_path && (
-                        <PosterCard.Image
-                          src={tmdbImage(credit.poster_path)}
-                          alt={credit.overview}
-                        />
-                      )}
+                      <PosterCard.Image
+                        src={credit.poster_path ? tmdbImage(credit.poster_path) : ''}
+                        alt={title || credit.overview}
+                      />
                     </Link>
                   </PosterCard.Root>
                 </TooltipTrigger>
diff --git a/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-details.tsx b/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-details.tsx
index 59943e8aa..fa5a6da99 100644
--- a/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-details.tsx
+++ b/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-details.tsx
@@ -5,6 +5,7 @@ import { BreadcrumbJsonLd, TvSeriesJsonLd } from '@/components/structured-data'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
 import { tmdbImage } from '@/utils/tmdb/image'
+import { APP_URL } from '../../../../../../constants'
 import { TvSerieInfos } from './tv-serie-infos'
 import { TvSerieTabs } from './tv-serie-tabs'
 
@@ -15,6 +16,14 @@ type TvSerieDetailsProps = {
 
 export const TvSerieDetails = async ({ id, language }: TvSerieDetailsProps) => {
   const tvSerie = await tmdb.tv.details(id, language)
+  const backdropUrl = tvSerie.backdrop_path
+    ? tmdbImage(tvSerie.backdrop_path)
+    : undefined
+  const posterUrl = tvSerie.poster_path
+    ? tmdbImage(tvSerie.poster_path)
+    : undefined
+  const structuredDataImage =
+    backdropUrl ?? posterUrl ?? `${APP_URL}/logo-black.png`
 
   return (
     <div className="mx-auto max-w-6xl relative">
@@ -34,10 +43,10 @@ export const TvSerieDetails = async ({ id, language }: TvSerieDetailsProps) => {
       <TvSeriesJsonLd
         name={tvSerie.name}
         description={tvSerie.overview}
-        image={tmdbImage(tvSerie.backdrop_path)}
+        image={structuredDataImage}
         url={`https://plotwist.app/${language}/tv-series/${id}`}
       />
-      <Banner url={tmdbImage(tvSerie.backdrop_path)} />
+      <Banner url={backdropUrl} posterUrl={posterUrl} title={tvSerie.name} />
 
       <section className="mx-auto my-8 max-w-4xl space-y-6">
         <TvSerieInfos language={language} tvSerie={tvSerie} />
diff --git a/apps/web/src/components/banner/banner.tsx b/apps/web/src/components/banner/banner.tsx
index df0ccd9a1..6469e6c9a 100644
--- a/apps/web/src/components/banner/banner.tsx
+++ b/apps/web/src/components/banner/banner.tsx
@@ -1,27 +1,56 @@
 import type { ComponentProps } from 'react'
 import { cn } from '@/lib/utils'
+import { PosterFallback } from '../poster-fallback'
 
 type BannerProps = {
   url?: string
+  posterUrl?: string
+  title?: string
 } & ComponentProps<'div'>
 
-export const Banner = ({ url, className, ...props }: BannerProps) => {
+export const Banner = ({
+  url,
+  posterUrl,
+  title,
+  className,
+  ...props
+}: BannerProps) => {
+  const backgroundUrl = url || posterUrl
+  const isPosterAsFallback = !url && Boolean(posterUrl)
+
   return (
     <div
       {...props}
       className={cn(
-        'w-full overflow-hidden md:rounded-lg aspect-banner border-b lg:border max-h-[55dvh]',
-        !url && 'border-dashed bg-background',
+        'relative w-full overflow-hidden md:rounded-lg aspect-banner border-b lg:border max-h-[55dvh]',
+        !backgroundUrl && 'border-dashed bg-background',
         className
       )}
     >
-      <div
-        style={{
-          backgroundImage: `url('${url}')`,
-          backgroundSize: 'cover',
-        }}
-        className="h-full w-full"
-      />
+      {backgroundUrl ? (
+        <>
+          <div
+            style={{
+              backgroundImage: `url('${backgroundUrl}')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+            className={cn(
+              'h-full w-full',
+              isPosterAsFallback && 'scale-110 blur-md brightness-75'
+            )}
+          />
+
+          {isPosterAsFallback && (
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/10 to-background/40" />
+          )}
+        </>
+      ) : (
+        <PosterFallback
+          title={title}
+          className="relative h-full bg-gradient-to-b from-muted to-background"
+        />
+      )}
     </div>
   )
 }
diff --git a/apps/web/src/components/command-search/command-search-items.tsx b/apps/web/src/components/command-search/command-search-items.tsx
index a80fd4e48..3bc685bd4 100644
--- a/apps/web/src/components/command-search/command-search-items.tsx
+++ b/apps/web/src/components/command-search/command-search-items.tsx
@@ -8,6 +8,7 @@ import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import type { GetUsersSearch200UsersItem } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import type {
   MovieWithMediaType,
   PersonWithMediaType,
@@ -59,13 +60,15 @@ export const CommandSearchMovie = ({
 
           <ItemHoverCard.Information>
             <ItemHoverCard.Poster>
-              {item.poster_path && (
+              {item.poster_path ? (
                 <Image
                   src={tmdbImage(item.poster_path, 'w500')}
                   alt={item.title}
                   fill
                   style={{ objectFit: 'cover' }}
                 />
+              ) : (
+                <PosterFallback title={item.title} />
               )}
             </ItemHoverCard.Poster>
 
@@ -116,13 +119,15 @@ export const CommandSearchTvSerie = ({
 
           <ItemHoverCard.Information>
             <ItemHoverCard.Poster>
-              {item.poster_path && (
+              {item.poster_path ? (
                 <Image
                   src={tmdbImage(item.poster_path, 'w500')}
                   alt={item.name}
                   fill
                   style={{ objectFit: 'cover' }}
                 />
+              ) : (
+                <PosterFallback title={item.name} />
               )}
             </ItemHoverCard.Poster>
 
diff --git a/apps/web/src/components/full-review/full-review.tsx b/apps/web/src/components/full-review/full-review.tsx
index fb408a333..dc8ac50d0 100644
--- a/apps/web/src/components/full-review/full-review.tsx
+++ b/apps/web/src/components/full-review/full-review.tsx
@@ -12,6 +12,7 @@ import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 import { useState } from 'react'
 import type { GetDetailedReviews200ReviewsItem } from '@/api/endpoints.schemas'
+import { PosterFallback } from '@/components/poster-fallback'
 import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { locale } from '@/utils/date/locale'
@@ -58,8 +59,10 @@ export const FullReview = ({ review }: FullReviewProps) => {
       <div className="flex space-x-4">
         <Link href={href} className="w-2/6 md:w-1/6">
           <figure className="relative aspect-[2/3] overflow-hidden rounded-md border bg-muted">
-            {posterPath && (
+            {posterPath ? (
               <Image src={tmdbImage(posterPath)} fill alt={title} />
+            ) : (
+              <PosterFallback title={title} />
             )}
           </figure>
         </Link>
diff --git a/apps/web/src/components/list-command/list-command-movies.tsx b/apps/web/src/components/list-command/list-command-movies.tsx
index 0129da79a..88f7f9b21 100644
--- a/apps/web/src/components/list-command/list-command-movies.tsx
+++ b/apps/web/src/components/list-command/list-command-movies.tsx
@@ -10,6 +10,7 @@ import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import { Minus, Plus } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { Link } from 'next-view-transitions'
 import { v4 } from 'uuid'
 import { ItemHoverCard } from '@/components/item-hover-card'
@@ -96,13 +97,15 @@ export const ListCommandMovies = ({
 
                   <ItemHoverCard.Information>
                     <ItemHoverCard.Poster>
-                      {movie.poster_path && (
+                      {movie.poster_path ? (
                         <Image
                           src={tmdbImage(movie.poster_path, 'w500')}
                           alt={movie.title}
                           fill
                           style={{ objectFit: 'cover' }}
                         />
+                      ) : (
+                        <PosterFallback title={movie.title} />
                       )}
                     </ItemHoverCard.Poster>
 
diff --git a/apps/web/src/components/list-command/list-command-tv.tsx b/apps/web/src/components/list-command/list-command-tv.tsx
index 1d7c5fd72..7438d8afc 100644
--- a/apps/web/src/components/list-command/list-command-tv.tsx
+++ b/apps/web/src/components/list-command/list-command-tv.tsx
@@ -8,6 +8,7 @@ import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { HoverCardPortal } from '@radix-ui/react-hover-card'
 import { Minus, Plus } from 'lucide-react'
 import Image from 'next/image'
+import { PosterFallback } from '@/components/poster-fallback'
 import { Link } from 'next-view-transitions'
 import { v4 } from 'uuid'
 import { ItemHoverCard } from '@/components/item-hover-card'
@@ -94,13 +95,15 @@ export const ListCommandTv = ({
 
                   <ItemHoverCard.Information>
                     <ItemHoverCard.Poster>
-                      {tvSerie.poster_path && (
+                      {tvSerie.poster_path ? (
                         <Image
                           src={tmdbImage(tvSerie.poster_path, 'w500')}
                           alt={tvSerie.name}
                           fill
                           style={{ objectFit: 'cover' }}
                         />
+                      ) : (
+                        <PosterFallback title={tvSerie.name} />
                       )}
                     </ItemHoverCard.Poster>
 
diff --git a/apps/web/src/components/poster-card/poster-card.tsx b/apps/web/src/components/poster-card/poster-card.tsx
index 8620298ca..6a9aa6aaf 100644
--- a/apps/web/src/components/poster-card/poster-card.tsx
+++ b/apps/web/src/components/poster-card/poster-card.tsx
@@ -1,16 +1,31 @@
 import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import NextImage, { type ImageProps } from 'next/image'
 import { type ComponentProps, forwardRef } from 'react'
+import { PosterFallback } from '@/components/poster-fallback'
 
 const Root = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props, ref) => {
   return <div className="space-y-2" {...props} ref={ref} />
 })
 Root.displayName = 'Root'
 
+function hasValidPosterSrc(src: ImageProps['src']): boolean {
+  if (!src) return false
+  if (typeof src === 'string') {
+    return !src.endsWith('/null') && !src.endsWith('/undefined') && !src.endsWith('/')
+  }
+  return true
+}
+
 const Image = (props: ImageProps) => {
+  const valid = hasValidPosterSrc(props.src)
+
   return (
     <div className="relative aspect-poster w-full overflow-hidden rounded-lg border bg-muted shadow">
-      <NextImage {...props} fill />
+      {valid ? (
+        <NextImage {...props} fill />
+      ) : (
+        <PosterFallback title={typeof props.alt === 'string' ? props.alt : undefined} />
+      )}
     </div>
   )
 }
diff --git a/apps/web/src/components/poster-fallback/index.ts b/apps/web/src/components/poster-fallback/index.ts
new file mode 100644
index 000000000..dc7ee1ba5
--- /dev/null
+++ b/apps/web/src/components/poster-fallback/index.ts
@@ -0,0 +1 @@
+export * from './poster-fallback'
diff --git a/apps/web/src/components/poster-fallback/poster-fallback.tsx b/apps/web/src/components/poster-fallback/poster-fallback.tsx
new file mode 100644
index 000000000..1b3af8d0e
--- /dev/null
+++ b/apps/web/src/components/poster-fallback/poster-fallback.tsx
@@ -0,0 +1,60 @@
+import { cn } from '@/lib/utils'
+
+type PosterFallbackProps = {
+  title?: string
+  className?: string
+}
+
+const PlotWistMark = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 357 353"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M146.886 0.769C126.353 4.102 102.086 13.036 85.419 23.702C75.419 30.102 50.886 49.969 51.819 50.902C52.086 51.169 57.019 49.436 62.886 46.902C84.353 37.836 101.953 35.036 131.019 35.702C155.553 36.369 165.153 38.369 184.219 46.236C210.486 57.169 239.286 83.569 251.553 107.702C265.686 135.702 268.219 168.102 257.953 189.969C256.539 193.062 255.418 195.92 254.9 197.613C254.591 198.623 255.151 199.058 256.008 198.441C257.512 197.361 260.052 195.204 262.886 192.636C275.419 180.636 285.686 163.702 291.686 144.769C294.353 135.969 294.753 132.102 294.753 113.436C294.619 93.436 294.486 91.436 290.886 81.436C283.019 59.036 265.419 35.702 247.019 23.169C236.086 15.836 219.419 8.102 205.419 4.102C195.553 1.169 189.819 0.502 174.086 0.102C163.419-0.165 151.153 0.102 146.886 0.769Z"
+      fill="currentColor"
+    />
+    <path
+      d="M288.086 44.102C311.019 72.369 317.553 118.636 303.953 158.369C293.686 188.502 270.486 214.502 241.686 228.102C227.819 234.769 218.353 236.769 202.086 236.769C171.953 236.769 153.553 227.436 143.419 207.036C135.819 191.702 139.019 173.969 150.353 168.769C158.619 165.036 159.153 165.169 158.353 172.502C157.819 178.369 158.219 179.436 162.086 183.836C176.886 200.636 204.086 184.369 198.086 162.236C192.619 141.702 165.686 131.036 144.486 141.036C140.219 143.036 133.819 147.436 129.953 150.902C117.153 162.902 112.219 175.436 112.353 195.436C112.486 225.169 128.753 250.369 156.086 263.436C172.353 271.169 182.353 273.302 203.419 273.169C223.553 273.169 233.286 271.702 249.686 266.102C285.019 254.102 317.819 222.769 331.286 188.236C343.019 158.102 344.486 133.036 335.953 105.836C331.686 92.236 327.686 84.236 319.019 71.702C312.219 61.836 286.886 36.769 283.686 36.769C282.753 36.769 284.753 40.102 288.086 44.102Z"
+      fill="currentColor"
+    />
+    <path
+      d="M102.353 51.969C73.686 57.436 50.219 69.569 33.953 87.169C14.486 108.236 4.753 130.502 0.753 162.769C-0.714 174.636 0.086 200.236 2.086 201.436C2.619 201.702 3.419 196.902 3.953 190.636C6.353 158.636 29.553 119.436 59.553 96.636C78.619 82.102 98.353 73.169 124.086 67.302C139.819 63.836 171.953 63.036 181.953 65.969C185.019 66.902 187.953 67.302 188.353 66.902C189.686 65.702 172.753 58.102 161.153 54.769C146.353 50.369 117.686 49.036 102.353 51.969Z"
+      fill="currentColor"
+    />
+    <path
+      d="M149.553 81.036C127.153 83.036 109.42 91.969 91.286 110.102C80.22 121.169 77.553 124.636 72.353 135.569C58.886 163.302 59.953 194.102 75.42 224.769C91.953 257.569 118.886 279.569 151.82 287.436C169.02 291.569 171.82 290.369 159.153 284.502C126.62 269.169 104.62 244.902 97.42 216.236C90.62 188.502 98.753 158.769 118.353 139.969C129.686 129.036 139.286 124.369 154.753 122.236C201.153 115.702 233.553 164.369 203.553 195.836C195.82 204.102 189.686 206.769 178.086 206.769C169.953 206.769 167.153 206.102 163.02 203.569C155.686 199.036 156.486 203.169 164.22 209.169C179.42 221.036 197.686 222.636 215.553 213.836C231.82 205.702 242.753 191.569 246.886 173.036C254.22 139.969 236.486 106.102 202.886 89.569C186.62 81.569 171.153 79.036 149.553 81.036Z"
+      fill="currentColor"
+    />
+    <path
+      d="M54.886 124.369C43.82 135.169 37.02 144.369 29.82 157.569C20.886 174.102 17.953 185.436 17.153 205.436C16.62 220.902 16.886 224.102 19.953 235.836C27.553 265.169 48.22 295.836 73.286 314.636C121.953 351.169 184.753 361.702 241.82 342.769C263.686 335.436 288.086 319.302 303.82 301.702C313.686 290.769 314.886 287.169 306.486 293.836C294.353 303.436 269.553 312.769 249.42 315.436C234.886 317.302 202.353 317.036 186.086 314.769C130.22 306.902 82.486 275.569 61.286 232.636C51.153 212.236 47.42 196.636 47.42 174.902C47.42 153.569 53.42 132.236 62.886 119.836C68.353 112.636 64.486 114.769 54.886 124.369Z"
+      fill="currentColor"
+    />
+    <path
+      d="M354.086 170.236C354.086 175.169 348.62 191.836 343.82 201.169C328.486 231.436 301.686 259.169 274.22 272.769C253.82 283.036 236.486 287.969 213.553 290.369C197.82 291.836 181.153 290.902 173.553 287.969C171.686 287.302 171.286 287.569 171.686 288.902C171.953 289.836 177.286 292.369 183.286 294.369C221.553 307.036 271.153 299.836 307.02 276.369C341.02 254.102 356.753 223.302 356.753 178.902C356.753 171.302 356.22 166.102 355.42 166.102C354.753 166.102 354.086 167.969 354.086 170.236Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const PosterFallback = ({ title, className }: PosterFallbackProps) => {
+  return (
+    <div
+      className={cn(
+        'absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-muted via-muted to-background/90 p-5',
+        className
+      )}
+    >
+      <PlotWistMark className="mb-3 w-1/3 max-w-16 text-muted-foreground/30" />
+
+      {title && (
+        <p className="line-clamp-3 text-center text-[11px] font-semibold leading-snug text-foreground/70">
+          {title}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/poster/poster.tsx b/apps/web/src/components/poster/poster.tsx
index ad5d6d701..894e8f2e3 100644
--- a/apps/web/src/components/poster/poster.tsx
+++ b/apps/web/src/components/poster/poster.tsx
@@ -1,6 +1,6 @@
-import { Image as LucideImage } from 'lucide-react'
 import Image from 'next/image'
 import type { ComponentProps } from 'react'
+import { PosterFallback } from '@/components/poster-fallback'
 import { cn } from '@/lib/utils'
 import { tmdbImage } from '@/utils/tmdb/image'
 
@@ -28,7 +28,7 @@ export const Poster = ({ url, alt, className, ...props }: PosterProps) => {
           src={tmdbImage(url)}
         />
       ) : (
-        <LucideImage size={24} />
+        <PosterFallback title={alt} />
       )}
     </div>
   )