diff --git a/src/components/filters/FilterAccordion.tsx b/src/components/filters/FilterAccordion.tsx
index e69de29..a6454dd 100644
--- a/src/components/filters/FilterAccordion.tsx
+++ b/src/components/filters/FilterAccordion.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+} from '@chakra-ui/react';
+
+import { getAccordionItems } from '@components/filters/FilterOptions';
+
+export function FilterAccordion(props) {
+  const accordionItems = getAccordionItems(props);
+
+  return (
+    <>
+      <Accordion allowToggle mb='2'>
+        {accordionItems.map(({ title, content }, index) => (
+          <AccordionItem border='none' key={index}>
+            <h2>
+              <AccordionButton px='1' borderRadius='md'>
+                <Box as='span' pl='1' flex='1' textAlign='left'>
+                  {title}
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </h2>
+            <AccordionPanel pb='3' p='3'>
+              {content}
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/components/filters/FilterDrawer.tsx b/src/components/filters/FilterDrawer.tsx
index 72a3fe2..da1885d 100644
--- a/src/components/filters/FilterDrawer.tsx
+++ b/src/components/filters/FilterDrawer.tsx
@@ -16,6 +16,7 @@ import {
 } from '@chakra-ui/react';
 
 import { DrawerType } from '@components/types';
+// import { FilterAccordion } from '@components/filters/FilterAccordion';
 
 export function FilterDrawer({
   isOpen,
@@ -52,16 +53,34 @@ export function FilterDrawer({
       <Drawer isOpen={isOpen} placement='bottom' onClose={onClose} size='xl'>
         <DrawerOverlay bg='#1212126e' />
         <DrawerContent
+          m='0 auto'
+          w='95%'
           bg={bgDrawer}
           backdropFilter='auto'
           backdropBlur='12px'
           roundedTop='3xl'
-          maxH='450px'
-          borderTop='1px solid #A0AEC0'
+          border='1px solid #A0AEC0'
+          borderBottom='0'
         >
           <DrawerHeader>Filtrar por:</DrawerHeader>
           <DrawerCloseButton />
           <DrawerBody>
+            {/* <FilterAccordion
+              selectedMinPages=''
+              selectedMaxPages=''
+              handleMinChange=''
+              handleMaxChange=''
+              selectedLanguage={selectedLanguage}
+              handleLanguageChange={handleLanguageChange}
+              languages=''
+              selectedYear={selectedYear}
+              handleYearChange={handleYearChange}
+              years=''
+              selectedAuthor=''
+              handleAuthorChange=''
+              authors=''
+            /> */}
+
             <Flex px='2' direction='column' mb='10'>
               <Box mb='4' borderBottom='1px'>
                 Idioma
@@ -92,7 +111,7 @@ export function FilterDrawer({
                       </Radio>
                     ))}
                   <Radio value='' onChange={() => handleAllRadioChange('language')}>
-                    Todos los Idiomas
+                    Todos
                   </Radio>
                 </Flex>
               </RadioGroup>
@@ -125,7 +144,7 @@ export function FilterDrawer({
                       </Radio>
                     ))}
                   <Radio value='' onChange={() => handleAllRadioChange('year')}>
-                    Todos los Años
+                    Todos
                   </Radio>
                 </Flex>
               </RadioGroup>
diff --git a/src/components/filters/FilterOptions.tsx b/src/components/filters/FilterOptions.tsx
new file mode 100644
index 0000000..d194bbd
--- /dev/null
+++ b/src/components/filters/FilterOptions.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { FilterNumberPages } from '@components/filters/FilterNumberPages';
+import { FilterRadioGroup } from '@components/filters/FilterRadioGroup';
+import { capitalizeWords } from '@utils/utils';
+
+interface FilterAccordionTypes {
+  selectedMinPages: string;
+  selectedMaxPages: string;
+  handleMinChange: React.ChangeEventHandler<HTMLInputElement>;
+  handleMaxChange: React.ChangeEventHandler<HTMLInputElement>;
+  selectedLanguage: string;
+  handleLanguageChange: (value: string) => void;
+  languages: string[];
+  selectedYear: string;
+  handleYearChange: (value: string) => void;
+  years: string[];
+  selectedAuthor: string;
+  handleAuthorChange: (value: string) => void;
+  authors: string[];
+}
+
+export function getAccordionItems({
+  selectedMinPages,
+  selectedMaxPages,
+  handleMinChange,
+  handleMaxChange,
+  selectedLanguage,
+  handleLanguageChange,
+  languages,
+  selectedYear,
+  handleYearChange,
+  years,
+  selectedAuthor,
+  handleAuthorChange,
+  authors,
+}: FilterAccordionTypes) {
+  return [
+    {
+      title: 'N° de páginas',
+      content: (
+        <FilterNumberPages
+          min={selectedMinPages}
+          max={selectedMaxPages}
+          setMin={handleMinChange}
+          setMax={handleMaxChange}
+        />
+      ),
+    },
+    {
+      title: 'Idioma',
+      content: (
+        <FilterRadioGroup
+          options={languages.map(({ language, count }: any) => ({
+            value: language,
+            label: language,
+            count,
+          }))}
+          selectedValue={selectedLanguage}
+          onChange={handleLanguageChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+    {
+      title: 'Año',
+      content: (
+        <FilterRadioGroup
+          options={years.map(({ year, count }: any) => ({
+            value: String(year),
+            label: String(year),
+            count,
+          }))}
+          selectedValue={selectedYear}
+          onChange={handleYearChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+    {
+      title: 'Autor',
+      content: (
+        <FilterRadioGroup
+          options={authors.map(({ authors, count }: any) => ({
+            value: authors,
+            label: capitalizeWords(authors),
+            count,
+          }))}
+          selectedValue={selectedAuthor}
+          onChange={handleAuthorChange}
+          allLabel='Todos'
+        />
+      ),
+    },
+  ];
+}
diff --git a/src/components/filters/FilterRadioGroup.tsx b/src/components/filters/FilterRadioGroup.tsx
new file mode 100644
index 0000000..629ce81
--- /dev/null
+++ b/src/components/filters/FilterRadioGroup.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { RadioGroup, Radio, Box, Flex } from '@chakra-ui/react';
+
+interface OptionType {
+  value: string;
+  label: string;
+  count: number;
+}
+
+interface FilterRadioGroupType {
+  options: Array<OptionType>;
+  selectedValue: string;
+  onChange: (value: string) => void;
+  allLabel: string;
+}
+
+export function FilterRadioGroup({
+  options,
+  selectedValue,
+  onChange,
+  allLabel,
+}: FilterRadioGroupType) {
+  return (
+    <RadioGroup value={selectedValue} onChange={onChange} colorScheme='green'>
+      <Flex direction='column' gap='3'>
+        <Radio value=''>{allLabel}</Radio>
+        {options.map(({ value, label, count }) => (
+          <Radio key={value} value={value}>
+            {label}
+            <Box as='span' ml='2' color='gray.500'>
+              ({count})
+            </Box>
+          </Radio>
+        ))}
+      </Flex>
+    </RadioGroup>
+  );
+}
diff --git a/src/components/nav/MobileNav.tsx b/src/components/nav/MobileNav.tsx
index 33f2356..c2bb668 100644
--- a/src/components/nav/MobileNav.tsx
+++ b/src/components/nav/MobileNav.tsx
@@ -188,7 +188,8 @@ export function MobileNav() {
           <DrawerOverlay backdropFilter='blur(5px)' />
           <DrawerContent
             bg={bgDrawer}
-            maxW='294px'
+            maxW={{ base: '300px', sm: '380px' }}
+            borderRight='1px solid #A0AEC0'
             backdropFilter='auto'
             backdropBlur='12px'
             roundedRight='2xl'
diff --git a/src/pages/FilteredData.tsx b/src/pages/FilteredData.tsx
index d7c9b87..3245c0f 100644
--- a/src/pages/FilteredData.tsx
+++ b/src/pages/FilteredData.tsx
@@ -8,19 +8,12 @@ import {
   Icon,
   useDisclosure,
   Box,
-  Radio,
-  RadioGroup,
   Image,
   useColorModeValue,
   Spinner,
   Alert,
   AlertIcon,
   AlertTitle,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  AccordionPanel,
 } from '@chakra-ui/react';
 
 import { Card } from '@components/cards/Card';
@@ -39,8 +32,7 @@ import { Lost } from '@assets/assets';
 import { aboutCategories } from '../constant/constants';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { MyContainer } from '@components/ui/MyContainer';
-import { FilterNumberPages } from '@components/filters/FilterNumberPages';
-import { capitalizeWords } from '@utils/utils';
+import { FilterAccordion } from '@components/filters/FilterAccordion';
 
 export default function FilteredData() {
   const { ref, inView } = useInView();
@@ -211,116 +203,21 @@ export default function FilteredData() {
             },
           }}
         >
-          <Accordion allowToggle mb='2'>
-            <AccordionItem border='none'>
-              <h2>
-                <AccordionButton px='1' borderRadius='md'>
-                  <Box as='span' pl='1' flex='1' textAlign='left'>
-                    N° de páginas
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-              </h2>
-              <AccordionPanel pb='3' p='3'>
-                <FilterNumberPages
-                  min={selectedMinPages}
-                  max={selectedMaxPages}
-                  setMin={handleMinChange}
-                  setMax={handleMaxChange}
-                />
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem border='none'>
-              <h2>
-                <AccordionButton px='1' borderRadius='md'>
-                  <Box as='span' pl='1' flex='1' textAlign='left'>
-                    Idioma
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-              </h2>
-              <AccordionPanel pb='3' p='3'>
-                <RadioGroup
-                  value={selectedLanguage}
-                  onChange={handleLanguageChange}
-                  colorScheme='green'
-                >
-                  <Flex direction='column' gap='3'>
-                    <Radio value=''>Todos los Idiomas</Radio>
-                    {Array.isArray(languages) &&
-                      languages.map(({ language, count }: any) => (
-                        <Radio key={language} value={language}>
-                          {language}
-                          <Box as='span' ml='2' color='gray.500'>
-                            ({count})
-                          </Box>
-                        </Radio>
-                      ))}
-                  </Flex>
-                </RadioGroup>
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem border='none'>
-              <h2>
-                <AccordionButton px='1' borderRadius='md'>
-                  <Box as='span' pl='1' flex='1' textAlign='left'>
-                    Año
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-              </h2>
-              <AccordionPanel pb='3' p='3'>
-                <RadioGroup
-                  value={selectedYear}
-                  onChange={handleYearChange}
-                  colorScheme='green'
-                >
-                  <Flex direction='column' gap='3'>
-                    <Radio value=''>Todos los Años</Radio>
-                    {Array.isArray(years) &&
-                      years.map(({ year, count }: any) => (
-                        <Radio key={year} value={String(year)}>
-                          {year}
-                          <Box as='span' ml='2' color='gray.500'>
-                            ({count})
-                          </Box>
-                        </Radio>
-                      ))}
-                  </Flex>
-                </RadioGroup>
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem border='none'>
-              <h2>
-                <AccordionButton px='1' borderRadius='md'>
-                  <Box as='span' pl='1' flex='1' textAlign='left'>
-                    Autor
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-              </h2>
-              <AccordionPanel pb='3' p='3'>
-                <RadioGroup
-                  value={selectedAuthor}
-                  onChange={handleAuthorChange}
-                  colorScheme='green'
-                >
-                  <Flex direction='column' gap='3'>
-                    <Radio value=''>Todos los Autores</Radio>
-                    {Array.isArray(authors) &&
-                      authors.map(({ authors, count }: any) => (
-                        <Radio key={authors} value={authors}>
-                          {capitalizeWords(authors)}
-                          <Box as='span' ml='2' color='gray.500'>
-                            ({count})
-                          </Box>
-                        </Radio>
-                      ))}
-                  </Flex>
-                </RadioGroup>
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
+          <FilterAccordion
+            selectedMinPages={selectedMinPages}
+            selectedMaxPages={selectedMaxPages}
+            handleMinChange={handleMinChange}
+            handleMaxChange={handleMaxChange}
+            selectedLanguage={selectedLanguage}
+            handleLanguageChange={handleLanguageChange}
+            languages={languages}
+            selectedYear={selectedYear}
+            handleYearChange={handleYearChange}
+            years={years}
+            selectedAuthor={selectedAuthor}
+            handleAuthorChange={handleAuthorChange}
+            authors={authors}
+          />
         </Flex>
       </Flex>
     );