diff --git a/package-lock.json b/package-lock.json
index b5245eb..9e937ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
+        "@smastrom/react-rating": "1.5.0",
         "@tanstack/react-query": "5.51.11",
         "@tanstack/react-query-devtools": "5.51.11",
         "atropos": "2.0.2",
@@ -3853,6 +3854,15 @@
         "node": ">=14.18"
       }
     },
+    "node_modules/@smastrom/react-rating": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@smastrom/react-rating/-/react-rating-1.5.0.tgz",
+      "integrity": "sha512-7vg3NRgO0tpvEunq8BEWA8qckNSd7x3dVGqaNEfLs3Ow4ibU2EEXJtnd7Yl44xOujWIzXM5Bk2VZm2DVm065Qw==",
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.51.9",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.9.tgz",
@@ -16332,6 +16342,12 @@
         "@sentry/types": "8.19.0"
       }
     },
+    "@smastrom/react-rating": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@smastrom/react-rating/-/react-rating-1.5.0.tgz",
+      "integrity": "sha512-7vg3NRgO0tpvEunq8BEWA8qckNSd7x3dVGqaNEfLs3Ow4ibU2EEXJtnd7Yl44xOujWIzXM5Bk2VZm2DVm065Qw==",
+      "requires": {}
+    },
     "@tanstack/query-core": {
       "version": "5.51.9",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.9.tgz",
diff --git a/package.json b/package.json
index 0d67b6d..f44d274 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
+    "@smastrom/react-rating": "1.5.0",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.51.11",
     "atropos": "2.0.2",
diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
index 1a507f0..95ae4b3 100644
--- a/src/components/forms/FormEdit.tsx
+++ b/src/components/forms/FormEdit.tsx
@@ -39,6 +39,7 @@ import {
 } from '@components/forms/utils/utilsForm';
 import { useMyToast } from '@hooks/useMyToast';
 import { useGenerateSlug } from '@hooks/useGenerateSlug';
+import { Rating } from '@smastrom/react-rating';
 const Cropper = lazy(() => import('react-cropper'));
 
 export function FormEdit({
@@ -54,6 +55,7 @@ export function FormEdit({
   format,
   pathUrl,
   image,
+  rating,
 }: BookType) {
   const {
     handleSubmit,
@@ -87,7 +89,9 @@ export function FormEdit({
       url,
       public_id,
     },
+    rating,
   });
+
   const { mutate, isPending, isSuccess, error } = useUpdateBook(books);
   useGenerateSlug(books.title, setBooks); // Genera el pathUrl (Slug)
 
@@ -121,6 +125,13 @@ export function FormEdit({
     handleImage(e, setCropData, onOpen);
   }
 
+  function handleRatingChange(newRating: number) {
+    setBooks((books) => ({
+      ...books,
+      rating: newRating,
+    }));
+  }
+
   function getCropData() {
     getCrop(crop, setPreviewImg, books, setBooks, onClose);
   }
@@ -212,7 +223,7 @@ export function FormEdit({
   return (
     <>
       <Flex align='center' justify='center' direction='column'>
-        <Box w='full' maxWidth='800px'>
+        <Box w='full' maxWidth='930px'>
           <Flex
             as='form'
             onSubmit={handleSubmit(onSubmit)}
@@ -290,7 +301,7 @@ export function FormEdit({
                     required: 'Sinopsis es obligatorio',
                   })}
                   id='sinopsis'
-                  rows={12}
+                  rows={17}
                   mb='5'
                   bg={bgColorInput}
                   name='synopsis'
@@ -542,6 +553,21 @@ export function FormEdit({
                   placeholder='Elija un Formato'
                 />
               </FormControl>
+              <FormControl mt={{ base: 5, md: 8 }}>
+                <Flex align='center' mb='9px'>
+                  <FormLabel htmlFor='categoria' m='0'>
+                    Calificación{' '}
+                    <Box display='inline' fontSize='xs'>
+                      (Opcional)
+                    </Box>
+                  </FormLabel>
+                </Flex>
+                <Rating
+                  style={{ maxWidth: 190 }}
+                  value={books.rating}
+                  onChange={handleRatingChange}
+                />
+              </FormControl>
               <Box
                 // justify='space-evenly'
                 // direction='column'
diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
index 2fa6de9..6c29b10 100644
--- a/src/components/forms/NewBook.tsx
+++ b/src/components/forms/NewBook.tsx
@@ -22,6 +22,7 @@ import { AiOutlineCloudUpload } from 'react-icons/ai';
 import { BiImageAdd } from 'react-icons/bi';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IoWarningSharp } from 'react-icons/io5';
+import { Rating } from '@smastrom/react-rating';
 
 import { categories, formats, languages } from '../../constant/constants';
 import { BookType, MyChangeEvent } from '@components/types';
@@ -78,13 +79,14 @@ export function FormNewBook() {
       public_id: '',
     },
     userId: currentUser?.uid,
+    rating: 0,
   });
   useGenerateSlug(books.title, setBooks); // Genera el pathUrl (Slug)
 
   function allFieldsBook(book: BookType): boolean {
     return (
       Object.entries(book)
-        .filter(([key]) => key !== 'sourceLink')
+        .filter(([key]) => key !== 'sourceLink' && key !== 'rating')
         .every(([, value]) => value) && book.category.length > 0
     );
   }
@@ -111,6 +113,13 @@ export function FormNewBook() {
     handleImage(e, setCropData, onOpen);
   }
 
+  function handleRatingChange(newRating: number) {
+    setBooks((books) => ({
+      ...books,
+      rating: newRating,
+    }));
+  }
+
   function getCropData() {
     getCrop(crop, setPreviewImg, books, setBooks, onClose);
   }
@@ -209,7 +218,7 @@ export function FormNewBook() {
           p={{ base: 5, md: 10 }}
           rounded='lg'
           border='1px'
-          maxWidth='900px'
+          maxWidth='1000px'
         >
           <Box mb='5' fontSize='md'>
             Los campos con el{' '}
@@ -294,7 +303,7 @@ export function FormNewBook() {
                     required: 'Sinopsis es obligatorio',
                   })}
                   id='sinopsis'
-                  rows={12}
+                  rows={17}
                   mb='5'
                   bg={bgColorInput}
                   name='synopsis'
@@ -542,6 +551,21 @@ export function FormNewBook() {
                   placeholder='Elija un Formato'
                 />
               </FormControl>
+              <FormControl mt={{ base: 5, md: 8 }}>
+                <Flex align='center' mb='9px'>
+                  <FormLabel htmlFor='categoria' m='0'>
+                    Calificación{' '}
+                    <Box display='inline' fontSize='xs'>
+                      (Opcional)
+                    </Box>
+                  </FormLabel>
+                </Flex>
+                <Rating
+                  style={{ maxWidth: 190 }}
+                  value={books.rating}
+                  onChange={handleRatingChange}
+                />
+              </FormControl>
               <Box mt={{ base: 10, md: '22rem' }}>
                 <Button
                   type='submit'
diff --git a/src/components/forms/utils/utilsForm.ts b/src/components/forms/utils/utilsForm.ts
index 2762b3a..3ccebde 100644
--- a/src/components/forms/utils/utilsForm.ts
+++ b/src/components/forms/utils/utilsForm.ts
@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
 import pako from 'pako';
+import { MyChangeEvent } from '@components/types';
 
 function handleInputChange(
-  e,
+  e: MyChangeEvent,
   books,
   setBooks: React.Dispatch<React.SetStateAction<any>>,
 ) {
@@ -15,6 +16,13 @@ function handleInputChange(
       ...books,
       [name]: authorNames, // Guardamos un array de nombres de autores
     });
+  } else if (name === 'rating') {
+    const rating = parseFloat(value);
+
+    setBooks({
+      ...books,
+      [name]: rating,
+    });
   } else {
     setBooks({
       ...books,
diff --git a/src/components/modals/ModalForm.tsx b/src/components/modals/ModalForm.tsx
index 4cc48d5..44c6470 100644
--- a/src/components/modals/ModalForm.tsx
+++ b/src/components/modals/ModalForm.tsx
@@ -26,6 +26,7 @@ export function ModalForm({
   year,
   category,
   format,
+  rating,
 }: ModalOptionsAndConfirType) {
   const bgColorBox = useColorModeValue('white', 'gray.900');
 
@@ -40,7 +41,7 @@ export function ModalForm({
         isOpen={isOpen}
         onClose={onClose}
         closeOnOverlayClick={false}
-        size={{ base: 'xs', lg: '4xl', md: '2xl' }}
+        size={{ base: 'xs', lg: '5xl', md: '2xl' }}
       >
         <ModalOverlay backdropFilter='blur(7px)' />
         <ModalContent overflow='hidden'>
@@ -59,6 +60,7 @@ export function ModalForm({
               year={year || ''}
               category={category || []}
               format={format || ''}
+              rating={rating || 0}
             />
           </ModalBody>
         </ModalContent>
diff --git a/src/components/types.d.ts b/src/components/types.d.ts
index be42cd4..c3326a9 100644
--- a/src/components/types.d.ts
+++ b/src/components/types.d.ts
@@ -82,6 +82,7 @@ interface BookType {
     public_id: string;
   };
   userId?: string | undefined;
+  rating: number;
 }
 
 interface ModalCropperType extends DisclosureType {
@@ -162,6 +163,7 @@ interface ModalOptionsAndConfirType extends Omit<Partial<BookType>>, DisclosureT
     url: string;
     public_id: string;
   };
+  rating?: number;
 }
 
 interface BooksSectionType {
diff --git a/src/main.tsx b/src/main.tsx
index ad48d14..ef3a82e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as Sentry from '@sentry/react';
 import { HelmetProvider } from 'react-helmet-async';
+import '@smastrom/react-rating/style.css';
 
 import theme from '../theme';
 import { routes } from './routes';
diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
index dbdbaed..a6445ce 100644
--- a/src/pages/Book.tsx
+++ b/src/pages/Book.tsx
@@ -299,6 +299,7 @@ export default function Book() {
           url: bookObject.image.url,
           public_id: bookObject.image.public_id,
         }}
+        rating={bookObject.rating}
         onClose={onCloseEdit}
       />
       <Flex