diff --git a/src/components/Posters/CollectionPreview.tsx b/src/components/Posters/CollectionPreview.tsx
new file mode 100644
index 0000000..4ff61d4
--- /dev/null
+++ b/src/components/Posters/CollectionPreview.tsx
@@ -0,0 +1,84 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { memo } from 'react';
+import Image from 'next/image';
+
+type CollectionItem = {
+    collectionName: string;
+    collection: {
+        id: number;
+        title: string;
+        subtitle: string;
+        url: string;
+        alt: string;
+    }[];
+};
+
+type Props = {
+    selectedId: number | null;
+    setSelectedId: React.Dispatch<React.SetStateAction<number | null>>;
+    collection: CollectionItem[];
+};
+
+// eslint-disable-next-line react/display-name
+const CollectionPreview: React.FC<Props> = memo(({ selectedId, setSelectedId, collection }: Props) => {
+    const [selectedItem, setSelectedItem] = React.useState<{ id: number; url: string; alt: string } | null>(null);
+
+    const handleClick = (item: { id: number; url: string; alt: string }) => {
+        if (selectedItem && selectedItem.id === item.id) {
+            // If the same item is clicked again, close the modal
+            setSelectedId(null);
+            setSelectedItem(null);
+        } else {
+            setSelectedId(item.id);
+            setSelectedItem(item);
+        }
+    };
+
+    return (
+        <>
+            {collection.map((collectionItem) => (
+                <div key={collectionItem.collectionName}>
+                    <div className='text-2xl font-bold my-8'>{collectionItem.collectionName}</div>
+                    <div className='flex gap-12'>
+                        {collectionItem.collection.map((item) => (
+                            <motion.div
+                                key={item.id}
+                                layoutId={String(item.id)}
+                                onClick={() => handleClick(item)}
+                                className={`imageNeon relative w-36 h-48 shadow-[0px_0px_20px_2px_#fff] rounded-lg ease-in transition-all duration-300 ${selectedId === item.id ? 'border-4 border-purple-500' : ''
+                                    }`}
+                            >
+                                <Image src={item.url} alt={item.alt} fill objectFit='cover' className='rounded-lg' />
+                            </motion.div>
+                        ))}
+                    </div>
+
+                    <AnimatePresence>
+                        {selectedItem && (
+                            <motion.div
+                                key="modal"
+                                initial={{ opacity: 0 }}
+                                exit={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                className='fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 md:absolute shadow-[0px_0px_20px_2px_#fff] h-[300px] md:h-[300px] w-[300px] md:w-[300px] p-4 flex flex-col gap-4 bg-gradient-to-tr from-gray-800 to-slate-950 rounded-lg z-10 mx-auto md:mx-0 '
+                            >
+                                <Image src={selectedItem.url} alt={selectedItem.alt} fill objectFit='cover' className='rounded-lg z-10 w-full h-2/3' />
+                                <motion.div className='flex justify-end fill-white z-20 text-right'>
+                                    <div className='border-2 py-2 px-3 rounded-md cursor-pointer' onClick={() => handleClick(selectedItem)}>
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="32" width="24" viewBox="0 0 384 512">
+                                            <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                                        </svg>
+                                    </div>
+                                </motion.div>
+                            </motion.div>
+
+
+                        )}
+                    </AnimatePresence>
+                </div>
+            ))}
+        </>
+    );
+});
+
+export default CollectionPreview;
diff --git a/src/components/Posters/posterCollectionApi.ts b/src/components/Posters/posterCollectionApi.ts
new file mode 100644
index 0000000..be58d97
--- /dev/null
+++ b/src/components/Posters/posterCollectionApi.ts
@@ -0,0 +1,54 @@
+export const posterApi = [
+    {
+        collectionName: 'Human Animals',
+        collection: [
+            {
+                id: 8372982,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            },
+            {
+                id: 823239,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            },
+            {
+                id: 637829,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            },
+            {
+                id: 9093738,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            },
+            {
+                id: 137929,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            }
+        ]
+    },
+    {
+        collectionName: 'requin',
+        collection: [
+            {
+                id: 1384749,
+                title: 'Uno',
+                subtitle: 'Dos',
+                url: 'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png',
+                alt: 'oui',
+            },
+        ]
+    },
+];
diff --git a/src/pages/posters.tsx b/src/pages/posters.tsx
index 0c01e11..9e55b12 100644
--- a/src/pages/posters.tsx
+++ b/src/pages/posters.tsx
@@ -1,14 +1,18 @@
 import { neonBlanc, neonPurple } from '@/components/neonStyles'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { randomNeonColor } from '@/utils/randomNeonColor'
 import ImageGridContainer from '@/components/ImageGridContainer'
 import PosterGridHero from '@/components/PosterGridHero'
 import CustomLayout from '@/components/CustomLayout'
+import CollectionPreview from '@/components/Posters/CollectionPreview'
+import { posterApi } from '@/components/Posters/posterCollectionApi'
 
 type Props = {}
 
 export default function posters({ }: Props) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedId, setSelectedId] = useState<number | null>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         randomNeonColor('imageNeon');
@@ -31,6 +35,13 @@ export default function posters({ }: Props) {
                         </div>
                         <PosterGridHero url1={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/shark.png'} alt1={'requin'} url2={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/bad-monkey.png'} alt2={'bad-monkey'} url3={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/fish.png'} alt3={'fish'} url4={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/fox.png'} alt4={'fox'} url5={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/good-monkey.png'} alt5={'good-monkey'} url6={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/skeleton.png'} alt6={'skeleton'} url7={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/snake.png'} alt7={'snake'} url8={'https://raw.githubusercontent.com/MatthysDev/Matthys.Dev/main/src/images/posters/frog.png'} alt8={'frog'} />
                     </div>
+                    <div className='w-2/3 m-auto my-32'>
+                        <CollectionPreview
+                            selectedId={selectedId}
+                            setSelectedId={setSelectedId}
+                            collection={posterApi}
+                        />
+                    </div>
                 </div>
             </main>
         </CustomLayout >