diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 91a8299..b8e60d4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,35 +25,39 @@ const Home: React.FC = () => (
 
     <main>
       <Flex
+        height="100%"
+        width="100%"
         display="block"
         fontFamily="sans-serif">
         <Box
           backgroundImage="url(https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Fbackground.jpg?alt=media&token=19725dda-488e-4235-b9a5-75da84695515)"
-          height="auto"
+          height= {["650px", "auto"]}
           width="100%"
           position="relative"
           backgroundPosition="center"
           backgroundRepeat="no-repeat"
           backgroundSize="cover"
           display="block">
-
           <Box
-            height="80px"
+            height = {["auto", "80px"]}
             top="15px"
             position="relative"
             display="flex"
             alignItems="center"
-            justifyContent="center">
-            <Image boxSize="110px" src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Flogo5.png?alt=media&token=30b3f1d7-139b-4875-b3d4-ede732442398" alt="" />
+            justifyContent="center"
+            marginBottom = {["30px", "0"]}>
+            <Image boxSize= {["70px", "110px"]} src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Flogo5.png?alt=media&token=30b3f1d7-139b-4875-b3d4-ede732442398" alt="" />
             <Button
               position="absolute"
-              right="4%"
+              right="10%"
               bg="none"
               type="submit"
-              width="250px"
+              height = {["20px", "35px"]}
+              width = {["100px", "250px"]}
               color="white"
               border="2px"
               borderColor="white"
+              fontSize={{ base: "8px", lg: "16px" }}
               onClick={() => window.location.href = "login"}>
               Ir al panel de organización
             </Button>
@@ -61,9 +65,9 @@ const Home: React.FC = () => (
 
           <HStack
             justifyContent="center"
-            spacing="144px">
+            spacing="8%">
             <Box
-              height="800px"
+              height= {["450px", "800px"]}
               width="45%"
               position="relative"
               display="block"
@@ -72,13 +76,11 @@ const Home: React.FC = () => (
               backgroundPosition="bottom"
               backgroundRepeat="no-repeat">
               <Box
-                position="relative"
-                marginTop="30px"
+                marginTop="2.5%"
                 display="flex">
                 <Text
                   fontWeight="700"
-                  //fontSize={{ base: "18px", md: "28px", lg: "38px" }}
-                  fontSize="38px"
+                  fontSize={{ base: "20px", lg: "38px" }}
                   color="white">
                   Vota online y seguro con Boxting
                 </Text>
@@ -90,8 +92,7 @@ const Home: React.FC = () => (
                 display="flex">
                 <Text
                     fontWeight="400"
-                    //fontSize={{ base: "12px", md: "18px", lg: "24px" }}
-                    fontSize="24px"
+                    fontSize={{ base: "18px",lg: "24px" }}
                     color="white">
                     Boxting es una solución de votación 100% virtual potenciada con tecnología Blockchain para asegurar la integridad e inmutabilidad de los votos.
                   </Text>
@@ -100,31 +101,32 @@ const Home: React.FC = () => (
 
             <Box
               maxWidth="550px"
-              width="35%"
+              width = {["50%", "35%"]}
+              height = {["260px", "510px"]}
               position="relative"
-              padding="25px 50px 25px 50px"
+              padding="1% 2% 1% 2%"
               display="block"
               top="-50px"
               boxShadow="0px 1px 5px 2px rgba(0,0,0, 0.4)"
               rounded="lg">
               <Box
                 position="relative"
-                marginTop="30px"
+                marginTop="4%"
                 display="block">
                 <Text
                   fontWeight="700"
-                  fontSize="29px"
-                  //fontSize={{ base: "15px", md: "21px", lg: "29px" }}
+                  fontSize={{ base: "14px", lg: "29px" }}
                   color="white">
-                  ¿Quieres organizar un evento de votación? Contáctanos!
+                  ¿Quieres organizar un evento de votación? ¡Contáctanos!
                   </Text>
                 <Box
                   position="relative"
-                  paddingTop="30px">
+                  paddingTop="4%">
                   <FormControl>
                     <Box
                       display="flex"
-                      width="100%">
+                      width="100%"
+                      height = "auto">
                       <Input
                         type="text"
                         variant="outline"
@@ -132,10 +134,11 @@ const Home: React.FC = () => (
                         _placeholder={{ color: 'gray.400', fontSize: '16px' }}
                         placeholder="Nombre"
                         bg="white"
-                        size="lg"
+                        width = "100%"
+                        height = {["20px", "48px"]}
                         borderRadius="0" />
                       <Box
-                        width="40px">
+                        width="9%">
                       </Box>
                       <Input
                         type="text"
@@ -144,11 +147,13 @@ const Home: React.FC = () => (
                         _placeholder={{ color: 'gray.400', fontSize: '16px' }}
                         placeholder="Apellidos"
                         bg="white"
-                        size="lg"
+                        width = "100%"
+                        height = {["20px", "48px"]}
                         borderRadius="0" />
                     </Box>
                     <Box
-                      marginTop="20px"
+                      marginTop="4%"
+                      height = "auto"
                       display="flex"
                       width="100%">
                       <Input
@@ -158,10 +163,11 @@ const Home: React.FC = () => (
                         _placeholder={{ color: 'gray.400', fontSize: '16px' }}
                         placeholder="Nombre de empresa"
                         bg="white"
-                        size="lg"
+                        width = "100%"
+                        height = {["20px", "48px"]}
                         borderRadius="0" />
                       <Box
-                        width="40px">
+                        width="9%">
                       </Box>
                       <Input
                         type="text"
@@ -170,30 +176,34 @@ const Home: React.FC = () => (
                         _placeholder={{ color: 'gray.400', fontSize: '16px' }}
                         placeholder="Correo"
                         bg="white"
-                        size="lg"
+                        width = "100%"
+                        height = {["20px", "48px"]}
                         borderRadius="0" />
                     </Box>
                     <Textarea
-                      marginTop="20px"
+                      marginTop="4%"
                       borderRadius="0"
                       bgColor="white"
                       _placeholder={{ color: 'gray.400', fontSize: '16px' }}
                       placeholder="Información"
-                      size="lg"
+                      width = "100%"
+                      height = {["10px", "48px"]}
                     />
                     <Box display="block">
                       <Checkbox
                         position="absolute"
                         color="white"
-                        fontSize="12px">
+                        visibility = {["hidden", "visible"]}>
                         ¿Te gustaría recibir mensajes de Boxting?
                       </Checkbox>
                       <Button
-                        marginTop="40px"
+                        marginTop = {["1%", "40px"]}
                         justifyContent="center"
                         bg="black"
                         type="submit"
-                        width="150px"
+                        fontSize = {["10px", "16px"]}
+                        width = {["20%", "150px"]}
+                        height = {["20px", "40px"]}
                         color="white"
                         borderRadius="0">
                         Solicitar
@@ -212,27 +222,27 @@ const Home: React.FC = () => (
           backgroundColor="white"
           display="inline-flex"
           justifyContent="center"
-          paddingTop="40px">
+          paddingTop="2%">
           <Text
             fontWeight="black"
-            //fontSize={{ base: "14px", md: "24px", lg: "40px" }}
-            fontSize="40px"
+            fontSize={{ base: "24px", lg: "40px" }}
             color="black">
             ¿Cómo funciona?
             </Text>
         </Box>
         <Box
-          height="680px"
-          width="full"
+          height = {["540px", "680px"]}
+          width="100%"
           backgroundColor="white"
           display="inline-flex"
           justifyContent="center"
-          paddingTop="110px">
+          paddingTop="5%">
           <Box
             width="480px"
             height="480px"
+            top = {["140px", "5px"]}
             position="relative"
-            marginRight="150px">
+            marginRight = {["60px", "150px"]}>
             <Image src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Fvoto4.png?alt=media&token=d63d5f59-7f3c-41c6-ba06-e910927cbaea"></Image>
           </Box>
           <Box
@@ -244,15 +254,13 @@ const Home: React.FC = () => (
             justifyContent="center">
             <Text
               fontWeight="black"
-              //fontSize={{ base: "14px", md: "24px", lg: "40px" }}
-              fontSize="40px"
+              fontSize={{ base: "20px", lg: "40px" }}
               color="black">
               Empieza a votar desde cualquier lugar
           </Text>
             <Text
-              marginTop="15px"
-              //fontSize={{ base: "10px", md: "16px", lg: "20px" }}
-              fontSize="20px"
+              marginTop="4%"
+              fontSize={{ base: "14px", lg: "20px" }}
               fontWeight="light"
               color="black">
               Tan solo necesitas un dispositivo móvil con internet, descargar nuesra app <a href={"https://play.google.com/store/apps/details?id=com.boxtinglabs.boxting&hl=es_419&gl=US"} style={{ color: '#6200EE' }}>Boxting</a> y comenzar a votar por tu candidato preferido en tus eventos.
@@ -260,12 +268,12 @@ const Home: React.FC = () => (
           </Box>
         </Box>
         <Box
-          height="640px"
-          width="full"
+          height = {["540px", "640px"]}
+          width="100%"
           backgroundColor="gray.100"
           display="inline-flex"
           justifyContent="center"
-          paddingTop="90px">
+          paddingTop="5%">
           <Box
             width="400px"
             height="460px"
@@ -273,18 +281,16 @@ const Home: React.FC = () => (
             display="flex"
             flexDirection="column"
             justifyContent="center"
-            marginRight="150px">
+            marginRight= {["60px", "150px"]}>
             <Text
               fontWeight="800"
-              //fontSize={{ base: "14px", md: "24px", lg: "40px" }}
-              fontSize="40px"
+              fontSize={{ base: "20px", lg: "40px" }}
               color="black">
               Aplicativo fácil de usar
           </Text>
             <Text
-              marginTop="15px"
-              //fontSize={{ base: "10px", md: "16px", lg: "20px" }}
-              fontSize="20px"
+              marginTop="4%"
+              fontSize={{ base: "14px", lg: "20px" }}
               fontWeight="light"
               color="black">
               Diseñado de forma que cualquier persona, sin importar su condición, pueda usar el aplicativo sin dificultad alguna.
@@ -293,22 +299,24 @@ const Home: React.FC = () => (
           <Box
             width="480px"
             height="480px"
+            top = {["130px", "5px"]}
             position="relative" >
             <Image src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Fprueba4.png?alt=media&token=cdf5f420-0de9-4573-895a-6653717ab87e"></Image>
           </Box>
         </Box>
         <Box
-          height="600px"
-          width="full"
+          height = {["520px", "600px"]}
+          width="100%"
           backgroundColor="white"
           display="inline-flex"
           justifyContent="center"
-          paddingTop="90px">
+          paddingTop="5%">
           <Box
             width="520px"
             height="480px"
             position="relative"
-            marginRight="150px">
+            top = {["130px", "5px"]}
+            marginRight= {["60px", "150px"]}>
             <Image src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Fsecurity2.png?alt=media&token=a982e2d9-0800-45bc-8efc-5380197885bd"></Image>
           </Box>
           <Box
@@ -320,15 +328,13 @@ const Home: React.FC = () => (
             justifyContent="center">
             <Text
               fontWeight="black"
-              //fontSize={{ base: "14px", md: "24px", lg: "40px" }}
-              fontSize="40px"
+              fontSize={{ base: "20px", lg: "40px" }}
               color="black">
               Total seguridad e integridad
           </Text>
             <Text
-              marginTop="15px"
-              //fontSize={{ base: "10px", md: "16px", lg: "20px" }}
-              fontSize="20px"
+              marginTop="4%"
+              fontSize={{ base: "14px", lg: "20px" }}
               fontWeight="light"
               color="black">
               Gracias a la revolucionaria tecnología Blockchain, las votaciones realizadas por nuestros usuarios son 100% seguras e inmutables en todo momento.
@@ -340,62 +346,59 @@ const Home: React.FC = () => (
 
     <footer>
       <Box
-        height="280px"
-        width="full"
+        height= "280px"
+        width="100%"
         backgroundColor="white"
-        paddingTop="40px"
-        display="table"
-        justifyContent="center"
-        justifyItems="center"
-        alignContent="center"
-        alignItems="center">
+        paddingTop="3%"
+        display="table">
         <Center>
           <Box
-            height="240px"
+            height = {["180px", "240px"]}
             display="flex"
             alignItems="center"
             flexDirection="column"
             bgColor="white">
             <Text
               color="black"
-              fontSize="28px"
+              fontSize ={{ base: "18px", lg: "28px" }}
               fontWeight="light"
-              marginTop="30px"
+              marginTop="6%"
               style={{ fontStyle: 'italic' }}>
               Votar nunca fue tan fácil, hasta ahora
             </Text>
             <a href='https://play.google.com/store/apps/details?id=com.boxtinglabs.boxting&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' target='blank'>
-              <Image marginTop="30px" height="100px" alt='Disponible en Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/es-419_badge_web_generic.png' />
+              <Image marginTop="10%" height= {["50px", "100px"]} alt='Disponible en Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/es-419_badge_web_generic.png' />
             </a>
 
           </Box>
         </Center>
         <Box
-          width="full"
-          height="200px"
+          width="100%"
+          height= {["120px", "200px"]}
           display="flex"
           alignItems="center"
           justifyContent="center"
           flexDirection="column"
           bgColor="#23272a">
           <Box
-            width="60%"
+            width = {["80%", "60%"]}
             height="80px"
             position="relative"
-            top="10px"
+            top="4%"
             borderTop="1px"
             borderColor="#5865f2">
             <Box
               position="relative"
-              top="20px"
+              top="15%"
               display="flex">
-
               <FormControl
                 display="flex">
                 <Button
                   bg="none"
                   type="submit"
-                  size="lg"
+                  height = {["30px", "55px"]}
+                  fontSize = {{ base: "10px", lg: "18px" }}
+                  width = {["80px", "160px"]}
                   justifySelf="center"
                   alignSelf="center"
                   color="white"
@@ -405,16 +408,16 @@ const Home: React.FC = () => (
                   Contáctanos
                 </Button>
               </FormControl>
-
               <Box
                 position="relative"
                 display="flex"
+                height = "auto"
                 width="100%"
                 alignItems="center"
                 justifyContent="flex-end">
-                <Image cursor="pointer" boxSize="30px" src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Ftw.png?alt=media&token=29d46efb-4734-4ffa-bd2e-ffd2d109236f" />
-                <Image marginLeft="15px" cursor="pointer" boxSize="30px" src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Finsta.png?alt=media&token=b22f7e76-92de-4ecf-a23a-1b1e4881a29c" />
-                <Image marginLeft="15px" cursor="pointer" boxSize="30px" src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Ffb.png?alt=media&token=cc8a0330-a243-4554-a183-95896636f78e" />
+                <Image cursor="pointer" boxSize = {["15px", "30px"]} src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Ftw.png?alt=media&token=29d46efb-4734-4ffa-bd2e-ffd2d109236f" />
+                <Image marginLeft="15px" cursor="pointer" boxSize = {["15px", "30px"]} src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Finsta.png?alt=media&token=b22f7e76-92de-4ecf-a23a-1b1e4881a29c" />
+                <Image marginLeft="15px" cursor="pointer" boxSize = {["15px", "30px"]} src="https://firebasestorage.googleapis.com/v0/b/boxting-8ec66.appspot.com/o/landing%2Ffb.png?alt=media&token=cc8a0330-a243-4554-a183-95896636f78e" />
               </Box>
             </Box>
           </Box>