diff --git a/apps/web/src/components/likes/likes.tsx b/apps/web/src/components/likes/likes.tsx
index aaf7f14ba..b4133eb78 100644
--- a/apps/web/src/components/likes/likes.tsx
+++ b/apps/web/src/components/likes/likes.tsx
@@ -12,6 +12,13 @@ import {
   DialogHeader,
   DialogTrigger,
 } from '@plotwist/ui/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@plotwist/ui/components/ui/drawer'
 import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { DialogTitle } from '@radix-ui/react-dialog'
 import { Heart } from 'lucide-react'
@@ -23,10 +30,13 @@ import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { ProBadge } from '../pro-badge'
 
+type LikesMode = 'dialog' | 'drawer'
+
 type LikesProps = {
   className?: string
   likeCount: number
   entityId: string
+  mode?: LikesMode
 } & PropsWithChildren
 
 export function Likes({
@@ -34,6 +44,7 @@ export function Likes({
   likeCount,
   entityId,
   children,
+  mode,
 }: LikesProps) {
   const { dictionary, language } = useLanguage()
   const [open, setOpen] = useState(false)
@@ -43,86 +54,106 @@ export function Likes({
 
   if (likeCount === 0) return null
 
-  const Content = () => {
-    if (isLoading || !data) {
-      return (
-        <>
-          {Array.from({ length: 5 }).map(_ => (
-            <div key={v4()} className="flex items-center">
-              <div className="flex items-center gap-1">
-                <Skeleton className="size-10 rounded-full" />
-                <Skeleton className="w-[10ch] h-[2ex] ml-2 mr-2 " />
+  const resolvedMode: LikesMode =
+    mode ??
+    (typeof window !== 'undefined' &&
+    window.matchMedia('(max-width: 768px)').matches
+      ? 'drawer'
+      : 'dialog')
+
+  const Trigger = children || (
+    <div
+      className={cn(
+        'rounded-md flex items-center bg-background border px-3 py-1 text-xs z-20 gap-1.5 cursor-pointer tabular-nums',
+        className
+      )}
+    >
+      <Heart size={12} className="fill-foreground" />
+      <NumberFlow value={likeCount} />
+    </div>
+  )
+
+  const Content = (
+    <>
+      {/*
+        API response is wrapped as { data: { likes: [...] } } by Orval.
+      */}
+      {(() => {
+        const likes = data?.data.likes ?? []
+        return isLoading || !data
+          ? Array.from({ length: 5 }).map(() => (
+              <div key={v4()} className="flex items-center">
+                <div className="flex items-center gap-1">
+                  <Skeleton className="size-10 rounded-full" />
+                  <Skeleton className="w-[10ch] h-[2ex] ml-2 mr-2" />
+                </div>
+                <Skeleton className="w-[5ch] h-[2ex] ml-auto" />
               </div>
+            ))
+          : likes.map(({ user, id }) => (
+              <div key={id} className="flex items-center">
+                <Link
+                  href={`/${language}/${user.username}`}
+                  className="flex items-center gap-1"
+                >
+                  <Avatar className="size-10 border text-[10px]">
+                    {user.avatarUrl && (
+                      <AvatarImage
+                        src={user.avatarUrl}
+                        className="object-cover"
+                      />
+                    )}
+                    <AvatarFallback>
+                      {user.username[0].toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <span className="ml-2 mr-2 truncate text-sm">
+                    {user.username}
+                  </span>
+                </Link>
 
-              <Skeleton className="w-[5ch] h-[2ex] ml-auto" />
-            </div>
-          ))}
-        </>
-      )
-    }
+                {user.subscriptionType === 'PRO' && <ProBadge />}
 
-    const likes = data.data && 'likes' in data.data ? data.data.likes : []
+                <Link
+                  href={`/${language}/${user.username}`}
+                  className="ml-auto whitespace-nowrap pl-8 text-xs text-muted-foreground hover:underline"
+                >
+                  {dictionary.review_likes.view_profile}
+                </Link>
+              </div>
+            ))
+      })()}
+    </>
+  )
 
+  if (resolvedMode === 'dialog') {
     return (
-      <>
-        {likes.map(({ user, id }) => (
-          <div key={id} className="flex items-center">
-            <Link
-              href={`/${language}/${user.username}`}
-              className="flex items-center gap-1"
-            >
-              <Avatar className="size-10 border text-[10px]">
-                {user.avatarUrl && (
-                  <AvatarImage src={user.avatarUrl} className="object-cover" />
-                )}
-
-                <AvatarFallback>
-                  {user.username[0].toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-
-              <span className="ml-2 mr-2 truncate text-sm">
-                {user.username}
-              </span>
-            </Link>
-
-            {user.subscriptionType === 'PRO' && <ProBadge />}
-
-            <Link
-              href={`/${language}/${user.username}`}
-              className="ml-auto whitespace-nowrap pl-8 text-xs text-muted-foreground hover:underline"
-            >
-              {dictionary.review_likes.view_profile}
-            </Link>
-          </div>
-        ))}
-      </>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>{Trigger}</DialogTrigger>
+
+        <DialogContent className="flex max-h-[642px] flex-col overflow-y-auto">
+          <DialogHeader className="mb-2">
+            <DialogTitle>{dictionary.likes}</DialogTitle>
+          </DialogHeader>
+
+          {Content}
+        </DialogContent>
+      </Dialog>
     )
   }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {children || (
-          <div
-            className={cn(
-              'rounded-md flex items-center bg-background border px-3 py-1 text-xs z-20 gap-1.5 cursor-pointer tabular-nums',
-              className
-            )}
-          >
-            <Heart size={12} className="fill-foreground" />
-            <NumberFlow value={likeCount} />
-          </div>
-        )}
-      </DialogTrigger>
-
-      <DialogContent className="flex max-h-[642px] flex-col overflow-y-auto">
-        <DialogHeader className="mb-2">
-          <DialogTitle>{dictionary.likes}</DialogTitle>
-        </DialogHeader>
-
-        <Content />
-      </DialogContent>
-    </Dialog>
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
+
+      <DrawerContent className="px-4 pb-4">
+        <DrawerHeader>
+          <DrawerTitle>{dictionary.likes}</DrawerTitle>
+        </DrawerHeader>
+
+        {Content}
+      </DrawerContent>
+    </Drawer>
   )
 }