diff --git a/package-lock.json b/package-lock.json
index a9762c5a..0091cca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
-  "name": "escuelajs-reto-05",
+  "name": "js-challenge",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "escuelajs-reto-05",
+      "name": "js-challenge",
       "version": "1.0.0",
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
         "cypress": "10.0.1"
       },
       "devDependencies": {
-        "live-server": "^1.2.2"
+        "live-server": "1.2.2"
       }
     },
     "node_modules/@colors/colors": {
diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..b4aea588 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title></title>
+  <title>PlatziStore</title>
+  <meta name="description" content="Somos comercio en línea con una gran cantidad de productos a comercializar. Estamos por lanzar nuestra implementación y necesitamos resolver los problemas que presenta nuestra aplicación.">
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
@@ -13,7 +14,7 @@
   <div class="Main">
     <h1>PlatziStore</h1>
     <div id="app"></div>
-    <div id="observe"></div>
+    <div id="observe">Loading...</div>
   </div>
 </body>
 
diff --git a/public/styles.css b/public/styles.css
index ada53a1a..8d3e2d41 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -54,3 +54,21 @@ body {
     opacity: 1;
   }
 }
+
+@media (max-width: 680px){
+  .Card h2{
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .Card h2 small{
+    padding: 10px 0px 0px 0px;
+  }
+
+  .Items {
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 1.5rem;
+    grid-row-gap: 1.5em;
+    display: grid;
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index eb2631c2..5be01067 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,31 +1,60 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const initOffset = 5;
+const productLength = 10;
 
-const getData = api => {
-  fetch(api)
-    .then(response => response.json())
-    .then(response => {
-      let products = response;
-      let output = products.map(product => {
-        // template
-      });
-      let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
-      $app.appendChild(newItem);
-    })
-    .catch(error => console.log(error));
+const getPagination = () => parseInt(localStorage.getItem("pagination"));
+
+const getData = async api => {
+  const actualOffset = getPagination();
+  try {
+    let response = await fetch(`${api}?offset=${actualOffset}&limit=${productLength}`);
+    let products = await response.json();
+    let output = products.map(product => {
+      // template
+      return `<article class="Card">
+        <img src="${product.images[0]}" />
+        <h2>
+        ${product.title}
+          <small>$ ${product.price}</small>
+        </h2>
+      </article>`
+    });
+    let newItem = document.createElement('section');
+    newItem.classList.add('Items');
+    newItem.innerHTML = output.join('');
+    $app.appendChild(newItem);
+  }
+  catch (error) {
+    console.log(error);
+  }
 }
 
-const loadData = () => {
-  getData(API);
+const  loadData = async () => {
+  await getData(API);
 }
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
-  rootMargin: '0px 0px 100% 0px',
-});
+const intersectionObserver = new IntersectionObserver(
+   async entries =>
+    // logic...
+    entries.forEach(entry => {
+      let pagination = getPagination();
+      if (entry.isIntersecting) {
+        if(pagination>=200) {
+          alert("Todos los productos Obtenidos");
+          intersectionObserver.unobserve($observe);
+          $observe.innerHTML = "";
+          return;
+        };
+        let actualOffset = pagination? pagination + productLength: initOffset;
+        localStorage.setItem("pagination", actualOffset);
+        loadData();
+      }
+    })
+  , {
+    rootMargin: '0px 0px 100% 0px',
+  });
 
 intersectionObserver.observe($observe);
+window.onbeforeunload = () => localStorage.clear();
\ No newline at end of file