diff --git a/index.html b/index.html
index 8e91d429a..ef8a65a07 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,11 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
-
-  <link rel="stylesheet" href="./styles.css">
-
-  <title>YardSale: tienda online de cositas chidas</title>
+  <title>YardSale: Tienda online</title>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <nav>
@@ -67,7 +64,7 @@
         </li>
       </ul>
     </div>
-
+    
     <div class="mobile-menu inactive">
       <ul>
         <li>
@@ -111,9 +108,10 @@
         </li>
       </ul>
     </div>
+
   </nav>
 
-  <aside id="shoppingCartContainer" class="inactive">
+  <aside class="product-detail inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -161,12 +159,12 @@
   </div>
   </aside>
 
-  <aside id="productDetail" class="inactive">
+  <aside class="product-cart-detail inactive">
     <div class="product-detail-close">
       <img src="./icons/icon_close.png" alt="close">
     </div>
     <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
-    <div class="product-info">
+    <div class="product-info-detail">
       <p>$35,00</p>
       <p>Bike</p>
       <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
@@ -193,9 +191,9 @@
         </div>
       </div> -->
 
-    </div>
+    </div>  
   </section>
 
   <script src="./main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
index 7ebb1bb3e..37053de3f 100644
--- a/main.js
+++ b/main.js
@@ -1,119 +1,118 @@
 const menuEmail = document.querySelector('.navbar-email');
-const menuHamIcon = document.querySelector('.menu');
-const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
-const productDetailCloseIcon = document.querySelector('.product-detail-close')
 const desktopMenu = document.querySelector('.desktop-menu');
+const menuBurguer = document.querySelector('.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
-const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
-const productDetailContainer = document.querySelector('#productDetail');
+const menuCart = document.querySelector('.navbar-shopping-cart');
+const aside = document.querySelector('.product-detail');
 const cardsContainer = document.querySelector('.cards-container');
+const productCartDetail = document.querySelector('.product-cart-detail');
+const btnCloseProductCartDetail = document.querySelector('.product-detail-close');
 
-menuEmail.addEventListener('click', toggleDesktopMenu);
-menuHamIcon.addEventListener('click', toggleMobileMenu);
-menuCarritoIcon.addEventListener('click', toggleCarritoAside);
-productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
 
-function toggleDesktopMenu() {
-  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+menuEmail.addEventListener('click', toggleDesktop);
+menuBurguer.addEventListener('click', toggleMobile);
+menuCart.addEventListener('click', toggleAside);
 
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive');
-  }
-  
+function toggleDesktop() {
   desktopMenu.classList.toggle('inactive');
 }
 
-function toggleMobileMenu() {
-  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
-
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive'); 
-  }
-
-  closeProductDetailAside();
+function toggleMobile() {
+  const isAsideOpen = aside.classList.contains('inactive');
+  productCartDetail.classList.add('inactive');
   
+  if(!isAsideOpen){
+    aside.classList.add('inactive');
+  }
   mobileMenu.classList.toggle('inactive');
 }
 
-function toggleCarritoAside() {
-  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
-  
-  if (!isMobileMenuClosed) {
+function toggleAside() {
+  const isMobileMenuOpen = mobileMenu.classList.contains('inactive');
+  const isProductDetailOpen = productCartDetail.classList.contains('inactive');
+
+  if(!isMobileMenuOpen){
     mobileMenu.classList.add('inactive');
   }
+  if(!isProductDetailOpen){
+    productCartDetail.classList.add('inactive');
+  }
 
-  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
   
-  if (!isProductDetailClosed) {
-    productDetailContainer.classList.add('inactive'); 
-  }
   
-  shoppingCartContainer.classList.toggle('inactive');
+  aside.classList.toggle('inactive');
 }
 
-function openProductDetailAside() {
-  shoppingCartContainer.classList.add('inactive');
-  productDetailContainer.classList.remove('inactive');
+
+function openProductDetail(){
+  aside.classList.add('inactive');
+  productCartDetail.classList.remove('inactive');
 }
 
-function closeProductDetailAside() {
-  productDetailContainer.classList.add('inactive');
+function closeProductDetail(){
+  productCartDetail.classList.add('inactive');
 }
 
+btnCloseProductCartDetail.addEventListener('click', closeProductDetail);
+
+
+
+
 const productList = [];
+
 productList.push({
   name: 'Bike',
   price: 120,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
+  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+
+})
+
 productList.push({
-  name: 'Pantalla',
-  price: 220,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
+  name: 'Computer',
+  price: 840,
+  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+
+})
+
 productList.push({
-  name: 'Compu',
-  price: 620,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
-});
-
-function renderProducts(arr) {
-  for (product of arr) {
-    const productCard = document.createElement('div');
-    productCard.classList.add('product-card');
-  
-    // product= {name, price, image} -> product.image
-    const productImg = document.createElement('img');
-    productImg.setAttribute('src', product.image);
-    productImg.addEventListener('click', openProductDetailAside);
-  
-    const productInfo = document.createElement('div');
-    productInfo.classList.add('product-info');
-  
-    const productInfoDiv = document.createElement('div');
-  
-    const productPrice = document.createElement('p');
-    productPrice.innerText = '$' + product.price;
-    const productName = document.createElement('p');
-    productName.innerText = product.name;
-  
-    productInfoDiv.appendChild(productPrice);
-    productInfoDiv.appendChild(productName);
-  
-    const productInfoFigure = document.createElement('figure');
-    const productImgCart = document.createElement('img');
-    productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
-  
-    productInfoFigure.appendChild(productImgCart);
-  
-    productInfo.appendChild(productInfoDiv);
-    productInfo.appendChild(productInfoFigure);
-  
-    productCard.appendChild(productImg);
-    productCard.appendChild(productInfo);
+  name: 'Alexa',
+  price: 40,
+  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+
+})
+
+
+
+for (product of productList){
+  const productCard = document.createElement('div');
+  productCard.setAttribute('class', 'product-card');
+
+  const imageProduct = document.createElement('img');
+  imageProduct.setAttribute('src', product.image);
+  imageProduct.addEventListener('click', openProductDetail);
+
+  const infoProduct = document.createElement('div');
+  infoProduct.setAttribute('class', 'product-info');
+
+  const divPrecio = document.createElement('div');
   
-    cardsContainer.appendChild(productCard);
-  }
+  const pPrecio = document.createElement('p');
+  pPrecio.innerHTML = '$ ' + product.price;
+  const pNombre = document.createElement('p');
+  pNombre.innerHTML = product.name;
+
+  const figCart = document.createElement('figure');
+  const imgCart = document.createElement('img');
+
+  imgCart.setAttribute('src','./icons/bt_add_to_cart.svg')
+
+  cardsContainer.append(productCard);
+  productCard.append(imageProduct);
+  productCard.append(infoProduct);
+  infoProduct.append(divPrecio);
+  infoProduct.append(figCart);
+  divPrecio.append(pPrecio);
+  divPrecio.append(pNombre);
+  figCart.append(imgCart);
 }
 
-renderProducts(productList);
diff --git a/styles.css b/styles.css
index 7228eedc8..46ab738bc 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,3 @@
-/* General */
 :root {
   --white: #FFFFFF;
   --black: #000000;
@@ -13,12 +12,6 @@ body {
   margin: 0;
   font-family: 'Quicksand', sans-serif;
 }
-.inactive {
-  display: none;
-}
-
-
-/* Navbar (general) */
 nav {
   display: flex;
   justify-content: space-between;
@@ -60,13 +53,14 @@ nav {
   color: var(--hospital-green);
 }
 .navbar-email {
-  color: var(--very-light-pink);
   cursor: pointer;
+  color: var(--very-light-pink);
   font-size: var(--sm);
   margin-right: 12px;
 }
 .navbar-shopping-cart {
   position: relative;
+  cursor: pointer;
 }
 .navbar-shopping-cart div {
   width: 16px;
@@ -83,11 +77,17 @@ nav {
   align-items: center;
 }
 
-/* Menu en desktop */
+/* NAV BAR RIGHT */
+
+.inactive{
+  display: none;
+}
+
+
 .desktop-menu {
   position: absolute;
   top: 60px;
-  right: 60px;
+  right: 55px;
   background: var(--white);
   width: 100px;
   height: auto;
@@ -122,14 +122,17 @@ nav {
   display: inline-block;
 }
 
-/* Menu en mobile */
+
+/* Menu burguer Mobile */
+
 .mobile-menu {
   background-color: var(--white);
   position: absolute;
-  top: 60px;
+  top: 61px;
   left: 0;
-  width: 100%;
+  width: calc(100% - 48px);
   padding: 24px;
+  z-index: 5;
 }
 .mobile-menu a {
   text-decoration: none;
@@ -158,18 +161,17 @@ nav {
 }
 
 
-/* Aside (product detail y carrito) */
-aside {
+/* Product Detail Aside */
+
+.product-detail {
   background-color: var(--white);
   width: 360px;
+  padding: 0 24px;
   box-sizing: border-box;
   position: absolute;
   right: 0;
-}
+  z-index: 5;
 
-/* ShoppingCart */
-#shoppingCartContainer {
-  padding: 0 24px;
 }
 .title-container {
   display: flex;
@@ -239,8 +241,64 @@ aside {
   height: 50px;
 }
 
-/* ProductDetail */
+
+
+/* Products List */
+
+.cards-container {
+  display: grid;
+  margin-top: 20px;
+  grid-template-columns: repeat(auto-fill, 240px);
+  gap: 26px;
+  place-content: center;
+}
+.product-card {
+  width: 240px;
+}
+.product-card img {
+  cursor: pointer;
+  width: 240px;
+  height: 240px;
+  border-radius: 20px;
+  object-fit: cover;
+}
+.product-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+.product-info figure {
+  margin: 0;
+}
+.product-info figure img {
+  width: 35px;
+  height: 35px;
+}
+.product-info div p:nth-child(1) {
+  font-weight: bold;
+  font-size: var(--md);
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.product-info div p:nth-child(2) {
+  font-size: var(--sm);
+  margin-top: 0;
+  margin-bottom: 0;
+  color: var(--very-light-pink);
+}
+
+/* Aside Product Detail */
+
+.product-cart-detail {
+  background-color: var(--white);
+  width: 360px;
+  padding-bottom: 24px;
+  position: absolute;
+  right: 0;
+}
 .product-detail-close {
+  cursor: pointer;
   background: var(--white);
   width: 14px;
   height: 14px;
@@ -254,28 +312,28 @@ aside {
 .product-detail-close:hover {
   cursor: pointer;
 }
-#productDetail > img:nth-child(2) {
+.product-cart-detail > img:nth-child(2) {
   width: 100%;
   height: 360px;
   object-fit: cover;
   border-radius: 0 0 20px 20px;
 }
-#productDetail .product-info {
+.product-info-detail {
   margin: 24px 24px 0 24px;
 }
-#productDetail .product-info p:nth-child(1) {
+.product-info-detail p:nth-child(1) {
   font-weight: bold;
   font-size: var(--md);
   margin-top: 0;
   margin-bottom: 4px;
 }
-#productDetail .product-info p:nth-child(2) {
+.product-info-detail p:nth-child(2) {
   color: var(--very-light-pink);
   font-size: var(--md);
   margin-top: 0;
   margin-bottom: 36px;
 }
-#productDetail .product-info p:nth-child(3) {
+.product-info-detail p:nth-child(3) {
   color: var(--very-light-pink);
   font-size: var(--sm);
   margin-top: 0;
@@ -299,50 +357,10 @@ aside {
 }
 
 
-/* Product List */
-.cards-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 240px);
-  gap: 26px;
-  place-content: center;
-  margin-top: 20px;
-}
-.product-card {
-  width: 240px;
-}
-.product-card img {
-  width: 240px;
-  height: 240px;
-  border-radius: 20px;
-  object-fit: cover;
-}
-.product-card .product-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-.product-card .product-info figure {
-  margin: 0;
-}
-.product-card .product-info figure img {
-  width: 35px;
-  height: 35px;
-}
-.product-card .product-info div p:nth-child(1) {
-  font-weight: bold;
-  font-size: var(--md);
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-.product-card .product-info div p:nth-child(2) {
-  font-size: var(--sm);
-  margin-top: 0;
-  margin-bottom: 0;
-  color: var(--very-light-pink);
-}
 
 
+/* Media Query */
+
 @media (max-width: 640px) {
   .menu {
     display: block;
@@ -353,14 +371,12 @@ aside {
   .navbar-email {
     display: none;
   }
-  .desktop-menu {
+  .desktop-menu{
     display: none;
   }
-
-  aside {
+  .product-detail {
     width: 100%;
   }
-
   .cards-container {
     grid-template-columns: repeat(auto-fill, 140px);
   }
@@ -371,10 +387,14 @@ aside {
     width: 140px;
     height: 140px;
   }
+  .product-cart-detail{
+    width: 100%;}
 }
 
-@media (min-width: 641px) {
-  .mobile-menu {
+@media (min-width:641px) {
+  .mobile-menu{
     display: none;
   }
 }
+
+
