diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index 05f22f7c3d480c13af98ad811c284e7f10813acf..d469cb814a2a8c55dc7b527ee4d7087a19cd9642 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -12,6 +12,8 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
   const [showButton, setShowButton] = useState(false);
   const router = useRouter()
 
+  console.log(data)
+
   const handleResize = (data) => {
     setShowButton(data?.length > cardsPerRow);
   };
@@ -30,7 +32,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
       <div className="mx-1 flex flex-col">
         <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0  md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[270px]"}`}>
 
-          {data?.length !== 0 ? data?.map((item, index) => {
+        {data?.length !== 0 ? data?.sort((a,b) => a.position - b.position).map((item, index) => {
             return (
               <Cards
                 collectionSource={collectionId}