diff --git a/package-lock.json b/package-lock.json
index f28b5080..74732b7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.59.0",
+        "react-responsive-masonry": "^2.7.1",
         "sonner": "^2.0.6",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
@@ -44,6 +45,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-responsive-masonry": "^2.6.0",
         "@types/webpack": "^5.28.5",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
@@ -3544,6 +3546,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-responsive-masonry": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.6.0.tgz",
+      "integrity": "sha512-MF2ql1CjzOoL9fLWp6L3ABoyzBUP/YV71wyb3Fx+cViYNj7+tq3gDCllZHbLg1LQfGOQOEGbV2P7TOcUeGiR6w==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
@@ -9154,6 +9165,11 @@
         }
       }
     },
+    "node_modules/react-responsive-masonry": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.7.1.tgz",
+      "integrity": "sha512-Q+u+nOH87PzjqGFd2PgTcmLpHPZnCmUPREHYoNBc8dwJv6fi51p9U6hqwG8g/T8MN86HrFjrU+uQU6yvETU7cA=="
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
diff --git a/package.json b/package.json
index 3ae947d1..7e4a5817 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.59.0",
+    "react-responsive-masonry": "^2.7.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
@@ -49,6 +50,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-responsive-masonry": "^2.6.0",
     "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
diff --git a/public/assets/wine1.jpg b/public/assets/wine1.jpg
new file mode 100644
index 00000000..5feb6045
Binary files /dev/null and b/public/assets/wine1.jpg differ
diff --git a/public/assets/wine10.jpg b/public/assets/wine10.jpg
new file mode 100644
index 00000000..66d909d9
Binary files /dev/null and b/public/assets/wine10.jpg differ
diff --git a/public/assets/wine11.jpg b/public/assets/wine11.jpg
new file mode 100644
index 00000000..98287a1d
Binary files /dev/null and b/public/assets/wine11.jpg differ
diff --git a/public/assets/wine12.jpg b/public/assets/wine12.jpg
new file mode 100644
index 00000000..ffbe2273
Binary files /dev/null and b/public/assets/wine12.jpg differ
diff --git a/public/assets/wine13.jpg b/public/assets/wine13.jpg
new file mode 100644
index 00000000..93082395
Binary files /dev/null and b/public/assets/wine13.jpg differ
diff --git a/public/assets/wine14.jpg b/public/assets/wine14.jpg
new file mode 100644
index 00000000..1251743e
Binary files /dev/null and b/public/assets/wine14.jpg differ
diff --git a/public/assets/wine15.jpg b/public/assets/wine15.jpg
new file mode 100644
index 00000000..fe3c24a9
Binary files /dev/null and b/public/assets/wine15.jpg differ
diff --git a/public/assets/wine16.jpg b/public/assets/wine16.jpg
new file mode 100644
index 00000000..043e7dee
Binary files /dev/null and b/public/assets/wine16.jpg differ
diff --git a/public/assets/wine17.jpg b/public/assets/wine17.jpg
new file mode 100644
index 00000000..230c0aba
Binary files /dev/null and b/public/assets/wine17.jpg differ
diff --git a/public/assets/wine18.jpg b/public/assets/wine18.jpg
new file mode 100644
index 00000000..080b31e3
Binary files /dev/null and b/public/assets/wine18.jpg differ
diff --git a/public/assets/wine19.jpg b/public/assets/wine19.jpg
new file mode 100644
index 00000000..a56b7aff
Binary files /dev/null and b/public/assets/wine19.jpg differ
diff --git a/public/assets/wine2.jpg b/public/assets/wine2.jpg
new file mode 100644
index 00000000..ea9abbad
Binary files /dev/null and b/public/assets/wine2.jpg differ
diff --git a/public/assets/wine3.jpg b/public/assets/wine3.jpg
new file mode 100644
index 00000000..10f38a3f
Binary files /dev/null and b/public/assets/wine3.jpg differ
diff --git a/public/assets/wine4.jpg b/public/assets/wine4.jpg
new file mode 100644
index 00000000..eb409c9c
Binary files /dev/null and b/public/assets/wine4.jpg differ
diff --git a/public/assets/wine5.jpg b/public/assets/wine5.jpg
new file mode 100644
index 00000000..c27af2e3
Binary files /dev/null and b/public/assets/wine5.jpg differ
diff --git a/public/assets/wine6.jpg b/public/assets/wine6.jpg
new file mode 100644
index 00000000..481c770c
Binary files /dev/null and b/public/assets/wine6.jpg differ
diff --git a/public/assets/wine7.jpg b/public/assets/wine7.jpg
new file mode 100644
index 00000000..0ce721c0
Binary files /dev/null and b/public/assets/wine7.jpg differ
diff --git a/public/assets/wine8.jpg b/public/assets/wine8.jpg
new file mode 100644
index 00000000..f6f431c5
Binary files /dev/null and b/public/assets/wine8.jpg differ
diff --git a/public/assets/wine9.jpg b/public/assets/wine9.jpg
new file mode 100644
index 00000000..30ac451e
Binary files /dev/null and b/public/assets/wine9.jpg differ
diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx
index 2b483451..cdd26365 100644
--- a/src/components/auth/AuthLayout.tsx
+++ b/src/components/auth/AuthLayout.tsx
@@ -1,13 +1,39 @@
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { cn } from '@/lib/utils';
 
+const MasonryGrid = dynamic(() => import('@/components/auth/MasonryGrid'), { ssr: false });
+
 interface AuthLayoutProps {
   children?: React.ReactNode;
   className?: string;
 }
 const AuthLayout = ({ children, className }: AuthLayoutProps) => {
-  const bgClass = 'flex justify-center items-center bg-gray-100 min-h-screen';
+  const wineImages = [
+    '/assets/wine1.jpg',
+    '/assets/wine2.jpg',
+    '/assets/wine3.jpg',
+    '/assets/wine4.jpg',
+    '/assets/wine5.jpg',
+    '/assets/wine6.jpg',
+    '/assets/wine7.jpg',
+    '/assets/wine8.jpg',
+    '/assets/wine9.jpg',
+    '/assets/wine10.jpg',
+    '/assets/wine11.jpg',
+    '/assets/wine12.jpg',
+    '/assets/wine13.jpg',
+    '/assets/wine14.jpg',
+    '/assets/wine15.jpg',
+    '/assets/wine16.jpg',
+    '/assets/wine17.jpg',
+    '/assets/wine18.jpg',
+    '/assets/wine19.jpg',
+  ];
+
+  const bgClass = 'relative flex justify-center items-center min-h-screen';
   const cardClass = cn(
     'w-full max-w-[21rem] md:max-w-[31rem] py-14 px-5 md:py-16 md:px-12 lg:py-20 flex flex-col items-center justify-center rounded-2xl bg-white border border-gray-300 shadow-[0px_2px_20px_rgba(0,0,0,0.04)]',
     className,
@@ -15,7 +41,17 @@ const AuthLayout = ({ children, className }: AuthLayoutProps) => {
 
   return (
     <div className={bgClass}>
-      <div className={cardClass}>{children}</div>
+      <div className={cardClass}>
+        <div className='absolute top-0 left-0 w-full h-full overflow-hidden z-[-1]'>
+          <div className='relative w-full h-full'>
+            <div className='absolute inset-0 bg-black/50 z-10' />
+            <div className='relative z-0'>
+              <MasonryGrid images={wineImages} />
+            </div>
+          </div>
+        </div>
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/components/auth/MasonryGrid.tsx b/src/components/auth/MasonryGrid.tsx
new file mode 100644
index 00000000..fa828034
--- /dev/null
+++ b/src/components/auth/MasonryGrid.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+
+interface MasonryGridProps {
+  images: string[];
+}
+
+export default function MasonryGrid({ images }: MasonryGridProps) {
+  return (
+    <ResponsiveMasonry
+      columnsCountBreakPoints={{ 0: 1, 350: 1, 743: 3, 1400: 5 }}
+      className='w-full h-full'
+    >
+      <Masonry gutter='10px'>
+        {images.map((src, i) => (
+          <ImageWithSkeleton key={i} src={src} index={i} />
+        ))}
+      </Masonry>
+    </ResponsiveMasonry>
+  );
+}
+
+function ImageWithSkeleton({ src, index }: { src: string; index: number }) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div
+      className={`w-full rounded overflow-hidden relative ${
+        !loaded ? 'bg-gray-200 animate-pulse' : ''
+      }`}
+    >
+      <Image
+        src={src}
+        alt={`image-${index}`}
+        width={300}
+        height={200}
+        className={`w-full h-auto block object-cover transition-opacity duration-500 ${
+          loaded ? 'opacity-100' : 'opacity-0'
+        }`}
+        onLoad={() => setLoaded(true)}
+        loading='lazy'
+      />
+    </div>
+  );
+}