diff --git a/src/app/(lobby)/@modal/(.)product-preview/[productId]/layout.tsx b/src/app/(lobby)/@modal/(.)product-preview/[productId]/layout.tsx
new file mode 100644
index 00000000..2ae2381e
--- /dev/null
+++ b/src/app/(lobby)/@modal/(.)product-preview/[productId]/layout.tsx
@@ -0,0 +1,11 @@
+import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog"
+
+export default function ProductModalLayout({
+  children,
+}: React.PropsWithChildren) {
+  return (
+    <AlertDialog defaultOpen>
+      <AlertDialogContent>{children}</AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/src/app/(lobby)/@modal/(.)product-preview/[productId]/page.tsx b/src/app/(lobby)/@modal/(.)product-preview/[productId]/page.tsx
new file mode 100644
index 00000000..9849ccef
--- /dev/null
+++ b/src/app/(lobby)/@modal/(.)product-preview/[productId]/page.tsx
@@ -0,0 +1,15 @@
+interface ProductModalPageProps {
+  params: {
+    productId: string
+  }
+}
+
+export default function ProductModalPage({ params }: ProductModalPageProps) {
+  const productId = Number(params.productId)
+
+  return (
+    <div>
+      <div>Product: {productId}</div>
+    </div>
+  )
+}
diff --git a/src/app/(lobby)/@modal/default.tsx b/src/app/(lobby)/@modal/default.tsx
new file mode 100644
index 00000000..86b9e9a3
--- /dev/null
+++ b/src/app/(lobby)/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}
diff --git a/src/app/(lobby)/layout.tsx b/src/app/(lobby)/layout.tsx
index 990d7964..32cd2a75 100644
--- a/src/app/(lobby)/layout.tsx
+++ b/src/app/(lobby)/layout.tsx
@@ -3,15 +3,24 @@ import { currentUser } from "@clerk/nextjs"
 import { SiteFooter } from "@/components/layouts/site-footer"
 import { SiteHeader } from "@/components/layouts/site-header"
 
+interface LobbyLayoutProps
+  extends React.PropsWithChildren<{
+    modal: React.ReactNode
+  }> {}
+
 export default async function LobbyLayout({
   children,
-}: React.PropsWithChildren) {
+  modal,
+}: LobbyLayoutProps) {
   const user = await currentUser()
 
   return (
     <div className="relative flex min-h-screen flex-col">
       <SiteHeader user={user} />
-      <main className="flex-1">{children}</main>
+      <main className="flex-1">
+        {children}
+        {modal}
+      </main>
       <SiteFooter />
     </div>
   )
diff --git a/src/app/(lobby)/product/[productId]/loading.tsx b/src/app/(lobby)/product/[productId]/loading.tsx
index 23114b0b..a1596fac 100644
--- a/src/app/(lobby)/product/[productId]/loading.tsx
+++ b/src/app/(lobby)/product/[productId]/loading.tsx
@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Icons } from "@/components/icons"
 import { Shell } from "@/components/shells/shell"
+import { ProductCardSkeleton } from "@/components/skeletons/product-card-skeleton"
 
 export default function ProductLoading() {
   return (
@@ -75,36 +75,15 @@ export default function ProductLoading() {
           <Separator className="md:hidden" />
         </div>
       </div>
-      <div className="overflow-hidden md:pt-6">
-        <Skeleton className="h-9 w-14" />
-        <div className="overflow-x-auto pb-2 pt-6">
+      <div className="space-y-6 overflow-hidden">
+        <Skeleton className="h-7 w-1/4" />
+        <ScrollArea orientation="horizontal" className="pb-3.5">
           <div className="flex gap-4">
             {Array.from({ length: 4 }).map((_, i) => (
-              <Card key={i} className="min-w-[260px] rounded-sm">
-                <CardHeader className="border-b p-0">
-                  <AspectRatio ratio={4 / 3}>
-                    <div className="flex h-full items-center justify-center bg-secondary">
-                      <Icons.placeholder
-                        className="h-9 w-9 text-muted-foreground"
-                        aria-hidden="true"
-                      />
-                    </div>
-                  </AspectRatio>
-                </CardHeader>
-                <CardContent className="grid gap-2.5 p-4">
-                  <Skeleton className="h-4 w-1/2" />
-                  <Skeleton className="h-4 w-1/4" />
-                </CardContent>
-                <CardFooter className="p-4">
-                  <div className="flex w-full flex-col items-center gap-2 sm:flex-row sm:justify-between">
-                    <Skeleton className="h-8 w-full rounded-sm" />
-                    <Skeleton className="h-8 w-full rounded-sm" />
-                  </div>
-                </CardFooter>
-              </Card>
+              <ProductCardSkeleton key={i} className="min-w-[260px]" />
             ))}
           </div>
-        </div>
+        </ScrollArea>
       </div>
     </Shell>
   )
diff --git a/src/components/skeletons/product-card-skeleton.tsx b/src/components/skeletons/product-card-skeleton.tsx
index f9f603d9..8ca23ba3 100644
--- a/src/components/skeletons/product-card-skeleton.tsx
+++ b/src/components/skeletons/product-card-skeleton.tsx
@@ -1,11 +1,21 @@
+import { cn } from "@/lib/utils"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { PlaceholderImage } from "@/components/placeholder-image"
 
-export function ProductCardSkeleton() {
+interface ProductCardSkeletonProps
+  extends React.ComponentPropsWithoutRef<typeof Card> {}
+
+export function ProductCardSkeleton({
+  className,
+  ...props
+}: ProductCardSkeletonProps) {
   return (
-    <Card className="h-full overflow-hidden rounded-sm">
+    <Card
+      className={cn("h-full overflow-hidden rounded-sm", className)}
+      {...props}
+    >
       <CardHeader className="border-b p-0">
         <AspectRatio ratio={4 / 3}>
           <PlaceholderImage asChild className="rounded-none" />