diff --git a/src/components/modals/ModalCollection.tsx b/src/components/modals/ModalCollection.tsx
index b4ce607..3617770 100644
--- a/src/components/modals/ModalCollection.tsx
+++ b/src/components/modals/ModalCollection.tsx
@@ -17,10 +17,9 @@ import {
 
 import { useCreateCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
+import { DisclosureType } from '@components/types';
 
-interface ModalCollectionType {
-  isOpen: boolean;
-  onClose: () => void;
+interface ModalCollectionType extends DisclosureType {
   refetch: () => void;
 }
 
@@ -33,6 +32,15 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
   const navigate = useNavigate();
   const { mutate, isPending, isSuccess } = useCreateCollections(uid);
 
+  useEffect(() => {
+    if (isSuccess) {
+      onClose();
+      refetch();
+      setName('');
+      navigate('/my-collections');
+    }
+  }, [isSuccess, navigate, onClose]);
+
   function handleNameCollection(e: React.ChangeEvent<HTMLInputElement>) {
     const { value } = e.target;
 
@@ -41,17 +49,11 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    mutate(name);
-  }
 
-  useEffect(() => {
-    if (isSuccess) {
-      onClose();
-      refetch();
-      setName('');
-      navigate('/my-collections');
+    if (!isPending) {
+      mutate(name);
     }
-  }, [isSuccess, navigate, onClose]);
+  }
 
   return (
     <>
@@ -83,7 +85,7 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
                   fontWeight='normal'
                   border='1px'
                   rounded='lg'
-                  isDisabled={!name}
+                  isDisabled={!name || isPending}
                   isLoading={isPending}
                   loadingText='Creando...'
                   _hover={{ outline: 'none', bg: 'green.600' }}
diff --git a/src/components/types.d.ts b/src/components/types.d.ts
index d2fa767..bf5442d 100644
--- a/src/components/types.d.ts
+++ b/src/components/types.d.ts
@@ -199,6 +199,7 @@ interface AuthProviderType {
 export type {
   MyChangeEvent,
   AboutType,
+  DisclosureType,
   LinkType,
   SelectBooksType,
   SelectType,
diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
index e0374a2..ebc40b1 100644
--- a/src/hooks/queries.ts
+++ b/src/hooks/queries.ts
@@ -28,6 +28,7 @@ import {
   getBooksFilterPaginated,
   getFindAllBookFavorite,
   getFindAllCollections,
+  getFindOneCollection,
   deleteCollections,
   postCollections,
 } from '@services/api';
@@ -305,6 +306,15 @@ function useDeleteCollections() {
   });
 }
 
+function useCollectionDetail(collectionId: string | undefined) {
+  return useQuery({
+    queryKey: [keys.collectionsDetail, collectionId],
+    queryFn: () => getFindOneCollection(collectionId),
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
 function useDeleteBook() {
   return useMutation({
     mutationKey: [keys.deleteBook],
@@ -356,6 +366,7 @@ export {
   useMoreBooksAuthors,
   useFavoriteBook,
   useCollections,
+  useCollectionDetail,
   useCreateCollections,
   useDeleteCollections,
 
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index 91cc11a..9acd235 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -102,8 +102,6 @@ export default function Favorites() {
           Todavía no has añadido libros a tus favoritos.
         </Box>
         <Link
-          w='auto'
-          display='block'
           as={NavLink}
           to='/explore'
           bg='green.500'
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 5a033a9..f036c4d 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -150,8 +150,8 @@ export function Profile() {
           Aún no hay publicaciones
         </Box>
         <Link
-          w={{ base: '85%', md: '230px' }}
-          display='block'
+          // w={{ base: '85%', md: '230px' }}
+          // display='block'
           as={NavLink}
           to='/new-post'
           bg='green.500'
diff --git a/src/pages/profile/MyCollections.tsx b/src/pages/profile/collections/AllCollections.tsx
similarity index 57%
rename from src/pages/profile/MyCollections.tsx
rename to src/pages/profile/collections/AllCollections.tsx
index 4923b01..e99531b 100644
--- a/src/pages/profile/MyCollections.tsx
+++ b/src/pages/profile/collections/AllCollections.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink, ScrollRestoration } from 'react-router-dom';
 import {
   Box,
   Button,
@@ -7,35 +8,34 @@ import {
   Image,
   useColorModeValue,
   useDisclosure,
+  Spinner,
+  LinkBox,
+  LinkOverlay,
 } from '@chakra-ui/react';
-import { ScrollRestoration } from 'react-router-dom';
 import { TbPlaylistAdd } from 'react-icons/tb';
 
 import { ContainerTitle } from '@components/layout/ContainerTitle';
 import { MainHead } from '@components/layout/Head';
 import { collections } from '@assets/assets';
 import { MyContainer } from '@components/ui/MyContainer';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
 import { ModalCollection } from '@components/modals/ModalCollection';
-import { useCollections, useDeleteCollections } from '@hooks/queries';
+import { useCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
 import { parseDate } from '@utils/utils';
 
-export function MyCollections() {
+export function AllCollections() {
   const bgColorButton = useColorModeValue('green.500', 'green.700');
   const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data, refetch } = useCollections(uid);
-  const { mutate, isSuccess } = useDeleteCollections();
+  const { data, refetch, isPending: isPendingData } = useCollections(uid);
   let collectionsUI;
+  let spinnerUI;
 
-  function deleteCollection(id: string) {
-    mutate([uid, id]);
-  }
-
-  if (isSuccess) {
-    refetch();
+  if (isPendingData) {
+    spinnerUI = <Spinner />;
   }
 
   if (!data || !data?.collections || data?.collections.length === 0) {
@@ -65,50 +65,66 @@ export function MyCollections() {
     );
   } else {
     collectionsUI = (
-      <Flex gap='7' mt='14' flexWrap='wrap'>
+      <MySimpleGrid>
         {data?.collections.map(({ id, name, createdAt }) => (
-          <Flex
+          <LinkBox
             key={id}
-            w={{ base: 'full', sm: '200px' }}
-            h={{ base: '120px', sm: '170px' }}
-            boxShadow='2xl'
-            border='1px solid #A0AEC0'
-            rounded='lg'
-            p='2'
-            justify='center'
-            position='relative'
+            display='flex'
+            w={{ base: '160px', sm: '250px' }}
+            h={{ base: '200px', sm: '210px' }}
+            justifyContent='center'
+            m='5'
           >
+            {/* <LinkOverlay
+              as={NavLink}
+              to={`/my-collections/${id}`}
+              tabIndex={-1}
+              _hover={{ outline: 'none' }}
+            > */}
             <Flex
-              direction='column'
-              mb='3'
-              position='absolute'
-              bottom='0'
-              textAlign='center'
+              w={{ base: '127px', sm: '160px', md: '250px' }}
+              h={{ base: '200px', sm: '210px' }}
+              boxShadow='xl'
+              border='1px solid #A0AEC0'
+              rounded='lg'
+              // p='2'
+              // m='5'
+              justify='center'
+              position='relative'
             >
-              <Box mb='3'>
-                <Box mb='1'>{name}</Box>
-                <Box fontSize='xs'>{parseDate(createdAt)}</Box>
-              </Box>
-              <Button
-                w='full'
-                h='30px'
-                px='0'
-                m='auto'
-                fontSize='xs'
-                onClick={() => deleteCollection(id)}
-                fontWeight='normal'
-                bg='red.500'
-                color='white'
-                // loadingText='Eliminando...'
-                // isLoading={isPending}
-                _hover={{ color: 'none' }}
+              <Flex
+                direction='column'
+                mb='3'
+                position='absolute'
+                bottom='0'
+                textAlign='center'
+                gap='3'
               >
-                Eliminar
-              </Button>
+                <Box mb='4'>
+                  <Box mb='1' fontSize={{ base: 'sm', md: 'md' }}>
+                    {name}
+                  </Box>
+                  <Box fontSize='xs'>{parseDate(createdAt)}</Box>
+                </Box>
+                <Button
+                  w='100px'
+                  h='30px'
+                  px='0'
+                  m='auto'
+                  fontSize='xs'
+                  as={NavLink}
+                  to={`/my-collections/${id}`}
+                  fontWeight='normal'
+                  _hover={{ color: 'none' }}
+                >
+                  Abrir
+                </Button>
+              </Flex>
             </Flex>
-          </Flex>
+            {/* </LinkOverlay> */}
+          </LinkBox>
         ))}
-      </Flex>
+      </MySimpleGrid>
     );
   }
 
@@ -129,7 +145,8 @@ export function MyCollections() {
           align='center'
           fontSize='lg'
         >
-          {data?.totalCollections} Colecciones
+          {data?.totalCollections ?? 0}{' '}
+          {data?.totalCollections === 1 ? 'Colección' : 'Colecciones'}
           <Button
             fontWeight='500'
             onClick={onOpen}
diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
new file mode 100644
index 0000000..d439179
--- /dev/null
+++ b/src/pages/profile/collections/CollectionDetail.tsx
@@ -0,0 +1,157 @@
+import React, { useEffect } from 'react';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
+import { Box, Button, Flex, Icon, Image, Link } from '@chakra-ui/react';
+
+import { useCollectionDetail, useDeleteCollections } from '@hooks/queries';
+import { MainHead } from '@components/layout/Head';
+import { ContainerTitle } from '@components/layout/ContainerTitle';
+import { Card } from '@components/cards/Card';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
+import { NoData } from '@assets/assets';
+import { MyContainer } from '@components/ui/MyContainer';
+import { useAuth } from '@contexts/AuthContext';
+import { MdOutlineExplore } from 'react-icons/md';
+import { FiArrowLeft } from 'react-icons/fi';
+
+export function CollectionDetail() {
+  const { collectionId } = useParams();
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+  const uid = currentUser?.uid;
+  const { data, isPending } = useCollectionDetail(collectionId);
+  const { mutate, isSuccess, isPending: isPendingDelete } = useDeleteCollections();
+  let asideAndCardsUI;
+
+  useEffect(() => {
+    if (isSuccess) {
+      navigate(`/my-collections`, { replace: true });
+    }
+  }, [isSuccess, navigate]);
+
+  function deleteCollection(id: string) {
+    mutate([uid, id]);
+  }
+
+  function handleGoBack() {
+    return navigate(-1);
+  }
+
+  if (data?.books.length > 0) {
+    asideAndCardsUI = (
+      <MySimpleGrid>
+        {data?.books.map(
+          ({
+            id,
+            category,
+            language,
+            title,
+            authors,
+            synopsis,
+            sourceLink,
+            pathUrl,
+            image,
+          }) => (
+            <React.Fragment key={id}>
+              <Card
+                id={id}
+                category={category}
+                language={language}
+                title={title}
+                authors={authors}
+                synopsis={synopsis}
+                sourceLink={sourceLink}
+                pathUrl={pathUrl}
+                image={image}
+              />
+            </React.Fragment>
+          ),
+        )}
+      </MySimpleGrid>
+    );
+  } else {
+    asideAndCardsUI = (
+      <Flex
+        w='full'
+        direction='column'
+        justify='center'
+        align='center'
+        mt='5'
+        mb='20'
+      >
+        <Image src={NoData} maxW='full' w={{ base: '200px', md: '400px' }} mt='5' />
+        <Box
+          my='7'
+          fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          Aún no hay libros agregados
+        </Box>
+        <Link
+          as={NavLink}
+          to='/explore'
+          bg='green.500'
+          color='black'
+          p='3'
+          border='1px'
+          rounded='lg'
+          textAlign='center'
+          _hover={{ outline: 'none', bg: 'green.600' }}
+        >
+          <Flex align='center' justify='center'>
+            <Icon as={MdOutlineExplore} fontSize='25' mr='2' />
+            Agregar libros
+          </Flex>
+        </Link>
+      </Flex>
+    );
+  }
+
+  return (
+    <>
+      <MainHead title={`${data?.name} | Mis colecciones | XBuniverse`} />
+      <ContainerTitle title={data?.name} />
+      <Flex m='0 auto'>
+        <Flex
+          w={{ base: '1315px', '2xl': '1580px' }}
+          mt='4'
+          px={{ base: '6', md: '20', sm: '10' }}
+          // borderBottom={`1px solid ${grayColor}`}
+          justify='space-between'
+          align='center'
+        >
+          <Button fontWeight='normal' w='90px' onClick={handleGoBack}>
+            <Flex align='center' justify='center'>
+              <Icon as={FiArrowLeft} boxSize='4' mr='1' />
+              Volver
+            </Flex>
+          </Button>
+          <Flex gap='3'>
+            <Button
+              // onClick={() => deleteCollection(data?.id)}
+              fontSize='sm'
+              fontWeight='normal'
+              loadingText='Editando...'
+              isLoading={isPendingDelete}
+              _hover={{ color: 'none' }}
+            >
+              Editar nombre
+            </Button>
+            <Button
+              onClick={() => deleteCollection(data?.id)}
+              fontSize='sm'
+              fontWeight='normal'
+              bg='red.500'
+              color='white'
+              loadingText='Eliminando...'
+              isLoading={isPendingDelete}
+              _hover={{ color: 'none' }}
+            >
+              Eliminar colección
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
+      <MyContainer>{asideAndCardsUI}</MyContainer>
+    </>
+  );
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index 0cdb56f..009fecf 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -14,7 +14,8 @@ import { PrivateRoute } from '@components/nav/PrivateRoute';
 import { MyAccount } from '@pages/profile/account/MyAccount';
 import { Profile } from '@pages/profile/Profile';
 import { RouteWatcher } from '@hooks/RouteWatcher';
-import { MyCollections } from '@pages/profile/MyCollections';
+import { AllCollections } from '@pages/profile/collections/AllCollections';
+import { CollectionDetail } from '@pages/profile/collections/CollectionDetail';
 
 const PrivacyPolicies = lazy(() => import('@pages/PrivacyPolicies'));
 const Explore = lazy(() => import('@pages/Explore'));
@@ -128,7 +129,15 @@ export const routes = createBrowserRouter([
         path: '/my-collections',
         element: (
           <PrivateRoute>
-            <MyCollections />
+            <AllCollections />
+          </PrivateRoute>
+        ),
+      },
+      {
+        path: '/my-collections/:collectionId',
+        element: (
+          <PrivateRoute>
+            <CollectionDetail />
           </PrivateRoute>
         ),
       },
diff --git a/src/services/api.ts b/src/services/api.ts
index 7cf1a5c..84d1861 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -89,6 +89,10 @@ async function deleteCollections(id: string | undefined, collectionId: string) {
   });
 }
 
+async function getFindOneCollection(collectionsId: string | undefined) {
+  return await fetchData(`${API_URL}/users/my-collections/${collectionsId}`);
+}
+
 async function postBook(books: any) {
   return await fetchData(`${API_URL}/books`, {
     method: 'POST',
@@ -174,6 +178,7 @@ export {
   getFindAllCollections,
   postCollections,
   deleteCollections,
+  getFindOneCollection,
   postBook,
   deleteBook,
   updateBook,
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f2712ab..1904cd2 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -25,6 +25,7 @@ const keys = {
   userFavoriteBooks: 'UserFavoriteBooks',
   createCollections: 'CreateCollections',
   allCollections: 'AllCollections',
+  collectionsDetail: 'CollectionsDetail',
   deleteCollections: 'DeleteCollections',
   deleteAccount: 'DeleteAccount',
 };