diff --git a/scientia/src/CourseList/CourseList.css b/scientia/src/CourseList/CourseList.css
index 627e4a6e..7dc0bb1c 100644
--- a/scientia/src/CourseList/CourseList.css
+++ b/scientia/src/CourseList/CourseList.css
@@ -1,7 +1,20 @@
-.div-wrapper-course-list{
+.div-wrapper-course-list {
     margin-left: 20px;
 }
 
 .not-found-course img {
     width: 1000px;
+}
+
+@media (max-width: 600px) {
+
+    .div-container-course-list {
+        padding: 0;
+        margin: 0;
+    }
+
+    .div-wrapper-course-list {
+        margin-left: 20px;
+    }
+
 }
\ No newline at end of file
diff --git a/scientia/src/CourseList/CourseList.js b/scientia/src/CourseList/CourseList.js
index ab7cf949..cc2771b1 100644
--- a/scientia/src/CourseList/CourseList.js
+++ b/scientia/src/CourseList/CourseList.js
@@ -102,4 +102,4 @@ const mapStateToProps = (state) => {
     }
 }
 
-export default connect(mapStateToProps, null)(CourseList)
+export default connect(mapStateToProps, null)(CourseList)
\ No newline at end of file
diff --git a/scientia/src/components/Cart/Cart.js b/scientia/src/components/Cart/Cart.js
index 42663c73..edb3b45a 100644
--- a/scientia/src/components/Cart/Cart.js
+++ b/scientia/src/components/Cart/Cart.js
@@ -82,7 +82,7 @@ export function Cart(props) {
     gift
   } = props;
 
-  // const [show, setShow] = useState(false);
+  const [show, setShow] = useState(false);
   const [redirect, setRedirect] = useState(false)
 
   const [checked, setChecked] = React.useState({
@@ -134,8 +134,6 @@ export function Cart(props) {
 
   const [state, setState] = React.useState({ emailGift: "" })
 
-
-
   function validateEmail(email) {
     const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
@@ -152,8 +150,8 @@ export function Cart(props) {
 
   };
   const handleChangeGift = (e) => setChecked({ ...checked, [e.target.name]: e.target.value })
-  // const handleShow = () => setShow(true);
-  // const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const handleClose = () => setShow(false);
 
   let history = useHistory();
 
@@ -164,9 +162,9 @@ export function Cart(props) {
     user.email && getUserInfo(user.email)
   }, [])
 
-  // function mensajeModel() {
-  //   return `Ya posees el/los curso/s!`
-  // }
+  function mensajeModel(id) {
+    return `Ya posees el/los curso/s!`
+  }
 
   var result = 0;
   var taxs = 0;
@@ -213,7 +211,7 @@ export function Cart(props) {
       }
 
       if (sameId) {
-        // handleShow()
+        handleShow()
       } else {
         confirmOrder(userCart)
         clearCart()
@@ -227,7 +225,6 @@ export function Cart(props) {
     }
   }
 
-
   const haddleRemoveItem = (id) => {
     if (login) {
       const data = { id: id, email: user.email }
@@ -290,13 +287,22 @@ export function Cart(props) {
                               textDecoration: "line-through",
                             }}
                           >
+
                             ${course.price !== null && parseFloat(course.price.toFixed(2))}
+
                           </h3>
                           <p>{course.percentageDiscount}% OFF</p>
                           <h3 style={{ color: "green" }}>
                             $
+
                             {course.price !== null &&
-                              parseFloat((course.price -((course.percentageDiscount / 100) * course.price)).toFixed(2))}
+                              parseFloat(
+                                course.price -
+                                (
+                                  (course.percentageDiscount / 100) *
+                                  course.price
+                                ).toFixed(2)
+                              )}
                           </h3>
                         </div>
                       ) : (
@@ -378,9 +384,9 @@ export function Cart(props) {
         </div>
       </div>
 
-      {/* <Modal show={show} onHide={handleClose}>
+      <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
-          <Modal.Title>YA POSEE ESTOS CURSOS</Modal.Title>
+          <Modal.Title>Inicio de Sesión</Modal.Title>
         </Modal.Header>
         <Modal.Body>{mensajeModel()}</Modal.Body>
         <Modal.Footer>
@@ -388,7 +394,7 @@ export function Cart(props) {
             Ok!
           </Button>
         </Modal.Footer>
-      </Modal> */}
+      </Modal>
 
       {redirect ? <Redirect to="/payment" /> : <></>}
       <Modal show={show2} onHide={handleClose3} style={styles.modal}>
diff --git a/scientia/src/components/CourseCard/CourseCard.css b/scientia/src/components/CourseCard/CourseCard.css
index cce3706d..f9a80d16 100644
--- a/scientia/src/components/CourseCard/CourseCard.css
+++ b/scientia/src/components/CourseCard/CourseCard.css
@@ -1,78 +1,41 @@
-.container-course {
-
-  display: inline-flex;
-  border: 1px solid rgb(161, 154, 154);
-  margin: 10px;
-  padding: 10px;
-  width: 1500px;
-  height: 350px;
-
-}
-
-.discount {
-  margin: 5px;
-  margin-top: 10px;
-  width: 110px;
-}
-
-.detaiils-card-container {
-  width: 500px;
-  margin-right: 20px;
-  margin-left: 20px;
-  padding-top: 40px;
-}
-
-.description-container {
-  padding-top: 40px;
-  width: fit-content;
-}
-
-.left-container {
-  width: fit-content;
-}
-
-.course-div-card {
-  width: fit-content;
-}
-
-.course-div-card img {
-  margin: 10px;
-  width: 350px;
-  height: 250px;
-}
-
-.button-container {
-  padding: 8px;
-  padding-top: 20px;
-
+.details-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
 }
 
-.info-cat-div {
+.title-details-div {
   display: flex;
-
+  margin-bottom: 40px;
+  align-items: center;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
+  color: aliceblue;
+  height: 120px;
+  margin-top: 5px;
 }
 
-.link {
-  width: 80px;
-  height: 30px;
-  margin-right: 5px;
+.title-details-div h1 {
+  padding-left: 20%;
+  font-size: 50px;
+  color: #fff;
 }
 
-.title-course {
+.details-div .confirm-button-div {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
-.detaiils-card-container .confirm-button2 {
+.details-div .confirm-button {
 
   appearance: none;
-  background-color: #a185e2;
+  background-color: #2ea44f;
   border: 1px solid rgba(27, 31, 35, .15);
   border-radius: 6px;
   box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
   box-sizing: border-box;
-  color: rgb(14, 13, 13);
+  color: #fff;
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -88,57 +51,28 @@
   touch-action: manipulation;
   vertical-align: middle;
   white-space: nowrap;
-  margin-right: 30px;
+  margin-left: 40px;
 }
 
-.detaiils-card-container .confirm-button2:hover {
-  background-color: #6e57a3;
-  color: aliceblue;
+.details-div .confirm-button:hover {
+  background-color: #a0c4aa;
 }
 
-
-.detaiils-card-container .cart-button2 {
-
-  appearance: none;
-  background-color: #0ed11e;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: rgb(14, 13, 13);
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 16px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  margin-right: 30px;
-}
-
-
-.detaiils-card-container .cart-button2:hover {
-  background-color: #16811f;
-  color: aliceblue;
+.details-div .preview-button-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.detaiils-card-container .cart-button-play {
+.details-div .preview-button {
 
   appearance: none;
-  background-color: #d1250e;
+  background-color: #d1d422;
   border: 1px solid rgba(27, 31, 35, .15);
   border-radius: 6px;
   box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
   box-sizing: border-box;
-  color: rgb(14, 13, 13);
+  color: rgb(14, 12, 12);
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -154,50 +88,14 @@
   touch-action: manipulation;
   vertical-align: middle;
   white-space: nowrap;
-  margin-right: 30px;
-  width: 105px;
+  margin-left: 40px;
 }
 
-
-.detaiils-card-container .cart-button-play:hover {
-  background-color: #f32106;
-  color: aliceblue;
-}
-
-.detaiils-card-container .cart-button-add {
-  appearance: none;
-  background-color: #eaee08;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: rgb(14, 13, 13);
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 6px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  margin-right: 30px;
-  width: 105px;
-}
-
-
-.detaiils-card-container .cart-button-add:hover {
-  background-color: #dbdf0f;
-  ;
-  color: aliceblue;
+.preview-button:hover {
+  background-color: #dae9de;
 }
 
 @media (max-width: 600px) {
-
-}
\ No newline at end of file
+  .title-details-div h1 {
+    padding-left: 5%;
+  }
diff --git a/scientia/src/components/Details/Details.css b/scientia/src/components/Details/Details.css
index 3e00e8aa..f9a80d16 100644
--- a/scientia/src/components/Details/Details.css
+++ b/scientia/src/components/Details/Details.css
@@ -93,4 +93,9 @@
 
 .preview-button:hover {
   background-color: #dae9de;
-}
\ No newline at end of file
+}
+
+@media (max-width: 600px) {
+  .title-details-div h1 {
+    padding-left: 5%;
+  }
diff --git a/scientia/src/components/Details/Details.js b/scientia/src/components/Details/Details.js
index 0dbb1df7..59d5fa87 100644
--- a/scientia/src/components/Details/Details.js
+++ b/scientia/src/components/Details/Details.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { connect } from 'react-redux'
 import Card from '@mui/material/Card';
-import {addCart, getCoursesReviewsById,addCartLogged} from '../../actions/actions'
+import { addCart, getCoursesReviewsById, addCartLogged } from '../../actions/actions'
 import CardHeader from '@mui/material/CardHeader';
 import CardMedia from '@mui/material/CardMedia';
 import CardContent from '@mui/material/CardContent';
@@ -68,14 +68,14 @@ function Details({
 
   React.useEffect(() => {
     getCoursesReviewsById(id);
-   
+
   }, []);
 
   const hadlePlayerDemo = () => {
     setOpen(true);
   };
 
- 
+
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
@@ -118,54 +118,94 @@ function Details({
 
 
 
-   //extraer el videoID para la DEMO:
-   if(urlVideo.urlVideo && urlVideo.urlVideo.toLowerCase().includes('youtube')){
-      var videoID = urlVideo.length === 0 ? "" : urlVideo.urlVideo.match(/(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/user\/\S+|\/ytscreeningroom\?v=))([\w\-]{10,12})\b/)[1]
-   } else {
-     var videoID = ''
-   }
+  //extraer el videoID para la DEMO:
+  if (urlVideo.urlVideo && urlVideo.urlVideo.toLowerCase().includes('youtube')) {
+    var videoID = urlVideo.length === 0 ? "" : urlVideo.urlVideo.match(/(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/user\/\S+|\/ytscreeningroom\?v=))([\w\-]{10,12})\b/)[1]
+  } else {
+    var videoID = ''
+  }
 
   return (
     <div>
-   <div className="title-details-div">
-      <h1>Details</h1>
-    </div>
-    <div className="details-div">
-      <Card sx={{ maxWidth: 900 }}>
-        <CardHeader
-          action={
-            <>
-              <IconButton aria-label="add to shopping cart">
-                <AddShoppingCartIcon onClick={() => validarCart(id)} />
-              </IconButton>
-            </>
-          }
-          title={name && name.toUpperCase()}
-          subheader={`Price: $${price - (percentageDiscount / 100) * price}`}
-        />
-        <CardMedia component="img" height="500" image={url} alt="Paella dish" />
-        <CardContent>
+      <div className="title-details-div">
+        <h1>Details</h1>
+      </div>
+      <div className="details-div">
+        <Card sx={{ maxWidth: 900 }}>
+          <CardHeader
+            action={
+              <>
+                <IconButton aria-label="add to shopping cart">
+                  <AddShoppingCartIcon onClick={() => validarCart(id)} />
+                </IconButton>
+              </>
+            }
+            title={name && name.toUpperCase()}
+            subheader={`Price: $${price - (percentageDiscount / 100) * price}`}
+          />
+          <CardMedia component="img" height="500" image={url} alt="Paella dish" />
+          <CardContent>
+            <div className="confirm-button-div">
+              <button className="preview-button" onClick={hadlePlayerDemo}>
+                PLAY PREVIEW
+              </button>
+              <ModalVideo
+                channel="youtube"
+                autoplay
+                youtube={{
+                  end: 10,
+                  showinfo: 0,
+                  controls: 0
+                }}
+                isOpen={isOpen}
+                videoId={videoID}
+                onClose={() => setOpen(false)}
+              />
+            </div>
+            <Typography>
+              <strong>CATEGORY:</strong>{" "}
+              {categories?.toUpperCase() || "No Categoty Defined"}
+            </Typography>
+            <br></br>
+            <Typography>
+              <strong>LEVEL:</strong> {level?.toUpperCase() || "No Level Defined"}
+            </Typography>
+            <br></br>
+            <Typography>
+              <strong>LANGUAGE: </strong>{" "}
+              {language?.toUpperCase() || "No Language Defined "}
+            </Typography>
+            <br></br>
+            <Typography>
+              <strong>DATE: </strong>
+              {date ? date.slice(0, 10) : "NO DATE"}
+            </Typography>
+            <br></br>
+            <TextRating score={score ? score : 0} />
+            <br></br>
+            <Typography>
+              <strong>DESCRIPTION:</strong>
+              {description ? description : "NO INFO"}
+              <br></br>
+              <br></br>
+              {solds > 100 ? ( // only for testing (solds > 100)
+                <img src={topSeller} alt="disc" className="discount"></img>
+              ) : null}
+              {solds > 20 && solds < 100 ? ( // only for testing (solds > 20 && solds < 100)
+                <img src={bestSeller} alt="disc" className="discount"></img>
+              ) : null}
+              {numbersOfDiscounts > 0 ? (
+                <img src={dicount} alt="disc" className="discount"></img>
+              ) : null}
+            </Typography>
+            <br></br>
+          </CardContent>
+          <br></br>
           <div className="confirm-button-div">
-            <button className="preview-button" onClick={hadlePlayerDemo}>
-              PLAY PREVIEW
+            <button className="confirm-button" onClick={() => validarCart(id)}>
+              ADD TO CART
             </button>
-            <ModalVideo
-              channel="youtube"
-              autoplay
-              youtube={{
-                end: 10,
-                showinfo: 0,
-                controls: 0
-              }}
-              isOpen={isOpen}
-              videoId={videoID}
-              onClose={() => setOpen(false)}
-            />
           </div>
-          <Typography>
-            <strong>CATEGORY:</strong>{" "}
-            {categories?.toUpperCase() || "No Categoty Defined"}
-          </Typography>
           <br></br>
           <Typography>
             <strong>LEVEL:</strong> {level?.toUpperCase() || "No Level Defined"}
@@ -227,13 +267,13 @@ function Details({
 }
 
 function mapStateToProps(state) {
-    return {
-        details: state.rootReducer.courseDetails,
-        cart : state.rootReducer.cart,
-        login: state.rootReducer.login,
-        userInfo: state.rootReducer.userInfo,
-        urlVideo: state.rootReducer.coursesReviews
-    }
+  return {
+    details: state.rootReducer.courseDetails,
+    cart: state.rootReducer.cart,
+    login: state.rootReducer.login,
+    userInfo: state.rootReducer.userInfo,
+    urlVideo: state.rootReducer.coursesReviews
+  }
 }
 
-export default connect(mapStateToProps, {addCart,getCoursesReviewsById,addCartLogged})(Details)
\ No newline at end of file
+export default connect(mapStateToProps, { addCart, getCoursesReviewsById, addCartLogged })(Details)
\ No newline at end of file
diff --git a/scientia/src/components/Form/Form.css b/scientia/src/components/Form/Form.css
index 8360da3c..dc8be243 100644
--- a/scientia/src/components/Form/Form.css
+++ b/scientia/src/components/Form/Form.css
@@ -1,92 +1,98 @@
 .form-div-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .form-div-container form {
-    display: flex;
-    flex-direction: column;
-    width: 500px;
+  display: flex;
+  flex-direction: column;
+  width: 500px;
 }
 
 .form-div-container input {
-    margin: 10px;
+  margin: 10px;
 }
 
 .title-form-div {
   display: flex;
   margin-bottom: 40px;
   align-items: center;
-  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
   color: aliceblue;
   height: 120px;
   margin-top: 5px;
 }
 
 .title-form-div h1 {
-    padding-left: 20%;
+  padding-left: 20%;
   font-size: 50px;
   color: #fff;
 }
 
 .form-button {
- 
-    appearance: none;
-    background-color: #2ea44f;
-    border: 1px solid rgba(27, 31, 35, .15);
-    border-radius: 6px;
-    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-    box-sizing: border-box;
-    color: #fff;
-    cursor: pointer;
-    display: inline-block;
-    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    padding: 6px 16px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-  
 
-.form  -button:focus:not(:focus-visible):not(.focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-  
+  appearance: none;
+  background-color: #2ea44f;
+  border: 1px solid rgba(27, 31, 35, .15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
 
-.form  -button:hover {
-    background-color: #2c974b;
-  }
-  
 
-.form  -button:focus {
-    box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
-    outline: none;
-  }
-  
+.form -button:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
 
-.form  -button:disabled {
-    background-color: #94d3a2;
-    border-color: rgba(27, 31, 35, .1);
-    color: rgba(255, 255, 255, .8);
-    cursor: default;
-  }
-  
 
-.form  -button:active {
-    background-color: #298e46;
-    box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
-  }
+.form -button:hover {
+  background-color: #2c974b;
+}
+
+
+.form -button:focus {
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
+
+.form -button:disabled {
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
+
+.form -button:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
 
 .selector {
   margin-bottom: 10px;
+}
+
+@media (max-width: 600px) {
+  .title-form-div h1 {
+    padding-left: 5%;
+  }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Home/Home.css b/scientia/src/components/Home/Home.css
index becf44d5..f2ceccfe 100644
--- a/scientia/src/components/Home/Home.css
+++ b/scientia/src/components/Home/Home.css
@@ -31,9 +31,13 @@
 }
 
 @media (max-width: 600px) {
+  .title-home-div h1 {
+    padding-left: 5%;
+  }
+
   .boton-filtrado {
     display: flex;
-justify-content: center;
+    justify-content: center;
   }
 
   .barra-filtrado {
diff --git a/scientia/src/components/Home/Home.js b/scientia/src/components/Home/Home.js
index 31b773cb..762b1397 100644
--- a/scientia/src/components/Home/Home.js
+++ b/scientia/src/components/Home/Home.js
@@ -1,6 +1,5 @@
 
 import React, { useEffect } from "react";
-import Filtro from "../Search/Filtro";
 import SearchBar from "../Search/SearchBar";
 import CourseList from "../../CourseList/CourseList";
 import { getAllCourses, getGenresCourses, getUsers, getUserInfo, getCart, saludo } from '../../actions/actions'
@@ -45,13 +44,8 @@ export function Home({ user, getUserInfo, getAllCourses, getGenresCourses, getCa
                 <h1>Home</h1>
             </div>
 
-            <div className="boton-filtrado">
-                <Filtro />
-            </div>
             <div className="home-div-container">
-                <div className="barra-filtrado">
-                    <SearchBar />
-                </div>
+                <SearchBar />
                 <CourseList />
             </div>
         </>
diff --git a/scientia/src/components/Landing/Landing.css b/scientia/src/components/Landing/Landing.css
index edfbc42e..e0ef302a 100644
--- a/scientia/src/components/Landing/Landing.css
+++ b/scientia/src/components/Landing/Landing.css
@@ -1,4 +1,3 @@
-
 .imagen-landing-div {
     display: flex;
     justify-content: center;
@@ -13,7 +12,7 @@
 .title-landing-div {
     display: flex;
     align-items: center;
-    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
     color: aliceblue;
     height: 120px;
 }
@@ -38,4 +37,10 @@
     padding-left: 10px;
     font-size: 30px;
     color: rgb(5, 5, 5);
+}
+
+@media (max-width: 600px) {
+    .title-landing-div h1 {
+        padding-left: 5%;
+    }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Login/Login.jsx b/scientia/src/components/Login/Login.jsx
index 765939c5..6c96ac5a 100644
--- a/scientia/src/components/Login/Login.jsx
+++ b/scientia/src/components/Login/Login.jsx
@@ -12,6 +12,7 @@ function Login(props) {
 
     const [state, setState] = useState({ email: '', password: '', remember: false })
     const [redir, setRedir] = useState(false)
+    const [signUp, setSignUp] = useState(false)
 
     const { enqueueSnackbar } = useSnackbar();
 
@@ -78,10 +79,11 @@ function Login(props) {
                     <div className={s.botones}>
                         <button onClick={state.email && state.password && handleSubmit} disabled={!state.email || !state.password} type="submit" className="btn btn-primary btn-lg">Enter</button>
                         <button onClick={submitGoogle} type="submit" className="btn btn-outline-primary btn-lg">Login with Google</button>
-                        <Link to='/signup' className="btn btn-outline-primary btn-lg">Register</Link>
+                        <button className="btn btn-outline-primary btn-lg" onClick={() => setSignUp(true)}>Register</button>
                     </div>
                 </form>
             </div>
+            {signUp && <Redirect to="/signup" />}
             {redir && <Redirect to="/home" />}
         </>
     )
diff --git a/scientia/src/components/Login/login.module.css b/scientia/src/components/Login/login.module.css
index 16b7de28..a2cb32cc 100644
--- a/scientia/src/components/Login/login.module.css
+++ b/scientia/src/components/Login/login.module.css
@@ -37,15 +37,17 @@
     flex-direction: column;
     justify-content: space-evenly;
   }
+
   .botones button {
     margin-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
   }
+
   .titleLoginDiv h1 {
+    margin: 0;
     padding: 0;
-    margin-left: auto;
-    margin-right: auto;
-    font-size: 50px;
-    color: #fff;
+    margin-left: 5%;
   }
 
   .contenedorFormLogin {
diff --git a/scientia/src/components/NewForm/Form.css b/scientia/src/components/NewForm/Form.css
index 365c2e7d..ea16b04b 100644
--- a/scientia/src/components/NewForm/Form.css
+++ b/scientia/src/components/NewForm/Form.css
@@ -1,17 +1,17 @@
 .form-div-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .form-div-container form {
-    display: flex;
-    flex-direction: column;
-    width: 500px;
+  display: flex;
+  flex-direction: column;
+  width: 500px;
 }
 
 .form-div-container input {
-    margin: 10px;
+  margin: 10px;
 }
 
 .containerBarra {
@@ -24,73 +24,73 @@
   display: flex;
   margin-bottom: 40px;
   align-items: center;
-  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
   color: aliceblue;
   height: 120px;
   margin-top: 5px;
 }
 
 .title-form-div h1 {
-    padding-left: 20%;
+  padding-left: 20%;
   font-size: 50px;
   color: #fff;
 }
 
 .form-button {
-    appearance: none;
-    background-color: #2ea44f;
-    border: 1px solid rgba(27, 31, 35, .15);
-    border-radius: 6px;
-    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-    box-sizing: border-box;
-    color: #fff;
-    cursor: pointer;
-    display: inline-block;
-    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    padding: 6px 16px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-  
+  appearance: none;
+  background-color: #2ea44f;
+  border: 1px solid rgba(27, 31, 35, .15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
 
 .form-button:focus:not(:focus-visible):not(.focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-  
+  box-shadow: none;
+  outline: none;
+}
+
 
 .form-button:hover {
-    background-color: #2c974b;
-  }
-  
+  background-color: #2c974b;
+}
+
 
 .form-button:focus {
-    box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
-    outline: none;
-  }
-  
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
 
 .form-button:disabled {
-    background-color: #94d3a2;
-    border-color: rgba(27, 31, 35, .1);
-    color: rgba(255, 255, 255, .8);
-    cursor: default;
-  }
-  
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
 
 .form-button:active {
-    background-color: #298e46;
-    box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
-  }
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
 
 .selector {
   margin-bottom: 10px;
@@ -100,4 +100,10 @@
   justify-content: center;
   justify-items: center;
   text-align: center;
+}
+
+@media (max-width: 600px) {
+  .title-form-div h1 {
+    padding-left: 5%;
+  }
 }
\ No newline at end of file
diff --git a/scientia/src/components/NewForm/NewFormLast.css b/scientia/src/components/NewForm/NewFormLast.css
index 67b1c913..d4a57470 100644
--- a/scientia/src/components/NewForm/NewFormLast.css
+++ b/scientia/src/components/NewForm/NewFormLast.css
@@ -1,19 +1,19 @@
 .form-div-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .formLast {
-    display: flex;
+  display: flex;
 }
 
 .formLast img {
-    width: 100px;
+  width: 100px;
 }
 
 .form-div-container input {
-    margin: 10px;
+  margin: 10px;
 }
 
 .containerBarra {
@@ -33,72 +33,78 @@
 }
 
 .title-form-div h1 {
-    padding-left: 20%;
+  padding-left: 20%;
   font-size: 50px;
   color: #fff;
 }
 
 .form-button {
-    appearance: none;
-    background-color: #2ea44f;
-    border: 1px solid rgba(27, 31, 35, .15);
-    border-radius: 6px;
-    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-    box-sizing: border-box;
-    color: #fff;
-    cursor: pointer;
-    display: inline-block;
-    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    padding: 6px 16px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-  
+  appearance: none;
+  background-color: #2ea44f;
+  border: 1px solid rgba(27, 31, 35, .15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
 
 .form-button:focus:not(:focus-visible):not(.focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-  
+  box-shadow: none;
+  outline: none;
+}
+
 
 .form-button:hover {
-    background-color: #2c974b;
-  }
-  
+  background-color: #2c974b;
+}
+
 
 .form-button:focus {
-    box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
-    outline: none;
-  }
-  
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
 
 .form-button:disabled {
-    background-color: #94d3a2;
-    border-color: rgba(27, 31, 35, .1);
-    color: rgba(255, 255, 255, .8);
-    cursor: default;
-  }
-  
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
 
 .form-button:active {
-    background-color: #298e46;
-    box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
-  }
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
 
 .selector {
   margin-bottom: 10px;
 }
 
 .containerLastForm {
-    background-color: rgba(90, 97, 90, 0.301);
-    padding: 10px;
+  background-color: rgba(90, 97, 90, 0.301);
+  padding: 10px;
+}
+
+@media screen and (min-width: 767px) {
+  .title-form-div h1 {
+    padding-left: 5%;
+  }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Pagination/Pagination.css b/scientia/src/components/Pagination/Pagination.css
index 003676d6..c09eabae 100644
--- a/scientia/src/components/Pagination/Pagination.css
+++ b/scientia/src/components/Pagination/Pagination.css
@@ -11,7 +11,7 @@
 }
 
 .pag-div li {
-    list-style:none;
+    list-style: none;
     margin: 20px;
     width: 10px;
 }
@@ -21,6 +21,16 @@
     font-size: larger;
     width: 30px;
     height: 30px;
-    color:black
-    
+    color: black
+}
+
+@media (max-width: 600px) {
+    .pag-div {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 20px;
+        width: 300px;
+        overflow-x: scroll;
+
+    }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Payment/tarjeta.module.css b/scientia/src/components/Payment/tarjeta.module.css
index bdf697cb..2389b7c5 100644
--- a/scientia/src/components/Payment/tarjeta.module.css
+++ b/scientia/src/components/Payment/tarjeta.module.css
@@ -23,6 +23,7 @@
     outline: none;
     font-weight: 300;
 }
+
 .button {
     width: 100%;
     padding: 10px;
@@ -35,6 +36,7 @@
     text-transform: uppercase;
     letter-spacing: 5px;
 }
+
 .progress-bar {
     width: 100%;
     padding: 5px;
@@ -43,12 +45,11 @@
 
 .titlePayDiv {
     display: flex;
-    margin-bottom: 40px;
     align-items: center;
     background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
     color: aliceblue;
     height: 120px;
-    margin-top: 5px;
+    margin-bottom: 40px;
 }
 
 .titlePayDiv h1 {
@@ -58,10 +59,16 @@
 }
 
 @media screen and (min-width: 767px) {
+    .titlePayDiv h1 {
+        padding-left: 5%;
+        font-size: 50px;
+        color: #fff;
+    }
     .container {
         width: 40%;
         margin: auto;
     }
+
     .formControl {
         display: flex;
     }
diff --git a/scientia/src/components/Player/Player.css b/scientia/src/components/Player/Player.css
index cbefec7f..b5773093 100644
--- a/scientia/src/components/Player/Player.css
+++ b/scientia/src/components/Player/Player.css
@@ -10,18 +10,24 @@
   align-items: center;
 }
 
-.title-player-div{
+.title-player-div {
   display: flex;
   margin-bottom: 20px;
   align-items: center;
-  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
   color: aliceblue;
   height: 120px;
   margin-top: 5px;
 }
 
 .title-player-div h1 {
-    padding-left: 20%;
+  padding-left: 20%;
   font-size: 50px;
   color: #fff;
+}
+
+@media (max-width: 600px) {
+  .title-player-div h1 {
+    padding-left: 5%;
+  }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Search/Filtro.jsx b/scientia/src/components/Search/Filtro.jsx
index a4bdcacf..84b32724 100644
--- a/scientia/src/components/Search/Filtro.jsx
+++ b/scientia/src/components/Search/Filtro.jsx
@@ -11,11 +11,12 @@ function Filtro() {
 
     return (
         <>
-            <Button variant="primary" onClick={handleShow}>
-                Filter
-            </Button>
-
-            <Offcanvas show={show} onHide={handleClose}>
+            <div className="botonFiltro">
+                <Button variant="dark" onClick={handleShow}>
+                    Filter
+                </Button>
+            </div>
+            <Offcanvas style={{maxWidth:"320px"}} show={show} onHide={handleClose}>
                 <Offcanvas.Header closeButton>
                     <Offcanvas.Title>Filters</Offcanvas.Title>
                 </Offcanvas.Header>
diff --git a/scientia/src/components/Search/SearchBar.css b/scientia/src/components/Search/SearchBar.css
index d6a4d5fa..8fb634c0 100644
--- a/scientia/src/components/Search/SearchBar.css
+++ b/scientia/src/components/Search/SearchBar.css
@@ -27,4 +27,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+
+.botonFiltro {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 600px) {
+  .wrapper .search {
+    width: 250px;
+  }
 }
\ No newline at end of file
diff --git a/scientia/src/components/Search/SearchBar.js b/scientia/src/components/Search/SearchBar.js
index 74a789ee..e9b27712 100644
--- a/scientia/src/components/Search/SearchBar.js
+++ b/scientia/src/components/Search/SearchBar.js
@@ -1,5 +1,3 @@
-
-
 import { React, useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import FormGroup from '@mui/material/FormGroup';
@@ -121,10 +119,10 @@ function SearchBar({ coursesByGenre, allCourses, searchByName, getAllCourses, ge
         value={input.buscar}
         autoComplete="off"
       ></input>
-      <Button variant="primary" className="search-icon" onClick={handleOnClick}>
+      <Button style={{marginBottom:"15px"}} variant="primary" className="search-icon" onClick={handleOnClick}>
         SEARCH
       </Button>
-      <Button variant="primary" className="search-icon" onClick={() => getAllCourses()}>
+      <Button style={{marginBottom:"15px"}} variant="primary" className="search-icon" onClick={() => getAllCourses()}>
         ALL
       </Button>
       <br></br>
diff --git a/scientia/src/components/SignUp/SignUp.css b/scientia/src/components/SignUp/SignUp.css
index 1efc6b76..3cb243a6 100644
--- a/scientia/src/components/SignUp/SignUp.css
+++ b/scientia/src/components/SignUp/SignUp.css
@@ -60,15 +60,21 @@
 }
 
 @media (max-width: 600px) {
-    .form-row{
+    .titleLoginDiv h1 {
+        padding-left: 5%;
+    }
+
+    .form-row {
         display: flex;
         width: 100%;
         margin-bottom: 10px;
         flex-direction: column;
     }
+
     .btn {
         width: 200px !important;
     }
+
     h1 {
         text-align: center;
     }
diff --git a/scientia/src/components/TrainningCard/TrainningCard.css b/scientia/src/components/TrainningCard/TrainningCard.css
index 3267634c..1a47e03d 100644
--- a/scientia/src/components/TrainningCard/TrainningCard.css
+++ b/scientia/src/components/TrainningCard/TrainningCard.css
@@ -8,7 +8,7 @@
 }
 
 .container-course2 .button-delete-div {
-  
+
     display: flex;
     justify-content: flex-end;
 }
@@ -62,7 +62,6 @@
 }
 
 .container-course2 .confirm-button3 {
- 
     appearance: none;
     background-color: #2ea44f;
     border: 1px solid rgba(27, 31, 35, .15);
@@ -72,7 +71,7 @@
     color: #fff;
     cursor: pointer;
     display: inline-block;
-    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
@@ -87,10 +86,23 @@
     white-space: nowrap;
     margin-bottom: 20px;
     margin-top: 0px;
+}
 
-  }
-   
-  .confirm-button3:focus {
+.confirm-button3:focus {
     box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
     outline: none;
-  }
+}
+
+@media (max-width: 600px) {
+    .container-course2 {
+        margin: 20px;
+        padding: 20px;
+        width: 320px;
+        height: 500px;
+    }
+
+    .course-div-card2 img {
+        width: 300px;
+        height: 200px;
+    }
+}
\ No newline at end of file
diff --git a/scientia/src/components/myLearning/myLearning.css b/scientia/src/components/myLearning/myLearning.css
index 1d48ab15..bf1830d9 100644
--- a/scientia/src/components/myLearning/myLearning.css
+++ b/scientia/src/components/myLearning/myLearning.css
@@ -14,7 +14,6 @@
 
 .inputdiv-cupon {
     width: 700px;
-    background: rgb(52, 58, 64);
     background: linear-gradient(0deg, rgba(52, 58, 64, 1) 0%, rgba(0, 0, 0, 1) 100%);
     border-radius: 4px;
     display: grid;
@@ -22,7 +21,10 @@
     padding: 10px 0 10px 145px;
     margin-left: auto;
     margin-right: auto;
-    ;
+}
+
+.inputdiv-cupon input {
+    margin-right: 20px;
 }
 
 .save {
@@ -45,4 +47,28 @@
     padding-left: 20%;
     font-size: 50px;
     color: #fff;
+}
+
+
+@media (max-width: 600px) {
+    .inputdiv-cupon {
+        width: 300px;
+        display: flex;
+        flex-direction: column;
+        padding-left: 10px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        padding-right: 10px;
+    }
+    .inputdiv-cupon input {
+        width: 100%;
+        border-radius: 5px;
+        height: 40px;
+    }
+    .save button {
+        width: 279px !important;
+    }
+    .title-learning-div h1 {
+        padding-left: 5%;
+      }
 }
\ No newline at end of file
diff --git a/scientia/src/components/myLearning/myLearning.js b/scientia/src/components/myLearning/myLearning.js
index 449790a0..54ddcb10 100644
--- a/scientia/src/components/myLearning/myLearning.js
+++ b/scientia/src/components/myLearning/myLearning.js
@@ -53,7 +53,7 @@ function MyLearning({ courses, user, getUserInfo }) {
                     />
 
                     <div className="save">
-                      <button className="btn btn-primary mx-auto w-50" type="submit" onClick={handleClick}>Take your gift!</button>
+                      <button className="btn btn-primary mx-auto w-50 botonTake" type="submit" onClick={handleClick}>Take your gift!</button>
                     </div>
                 </div>
       </div>