diff --git a/package-lock.json b/package-lock.json
index 825dec1..0e86f96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1392,16 +1392,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1796,17 +1786,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1833,34 +1812,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1882,13 +1833,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1953,16 +1897,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1979,21 +1913,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.7",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-          "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
         }
       }
     },
@@ -11043,6 +10962,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
diff --git a/src/components/SearchResultsPage.vue b/src/components/SearchResultsPage.vue
new file mode 100644
index 0000000..1e7ac46
--- /dev/null
+++ b/src/components/SearchResultsPage.vue
@@ -0,0 +1,76 @@
+<template>
+<div class="container my-5">
+  <h4><b>Resultados para "{{productResult[0].searchText}}"</b></h4>
+  <p>Hay {{productResult[0].numberFound}} productos</p>
+  <div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[0].img" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+            <p class="card-text">{{productResult[0].description}}</p>
+            <span><b>${{productResult[0].price}}</b></span>
+        </div>
+    </div>
+
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[1].img" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+            <p class="card-text">{{productResult[1].description}}</p>
+            <span><b>${{productResult[1].price}}</b></span>
+        </div>
+    </div>
+
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[2].img" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+            <p class="card-text">{{productResult[2].description}}</p>
+            <span><b>${{productResult[2].price}}</b></span>
+        </div>
+    </div>
+
+  </div>
+  <p>Mostrando {{productResult[0].numberFound}} de {{productResult[0].totalBookCategory}} artículo(s)</p>
+</div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            productResult: [
+                {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "Some quick example text to build on the card title and...",
+                price: 180,
+                totalBookCategory: 28,
+                img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg'
+                },
+                  {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "2 Some quick example text to build on the card title and...",
+                price: 190,
+                totalBookCategory: 28,
+                img: 'https://m.media-amazon.com/images/I/51HdyT9COEL.jpg'
+                },
+                  {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "3 Some quick example text to build on the card title and...",
+                price: 200,
+                totalBookCategory: 28,
+                img: 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Lenin_book_1902.jpg'
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+.g-card-sty {
+    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+}
+</style>
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index 15a5a15..d4bf0a4 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
-import SearchResultsPage from './view/SearchResultsPage.vue'
 
 const routes = [
     {
@@ -15,11 +14,6 @@ const routes = [
         component: Home,
         name: 'home'
     },
-    {
-        path: '/search-results',
-        component: SearchResultsPage,
-        name: 'searchResultsPage'
-    },
 ]
 
 Vue.use(VueRouter)
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c26d756..6e2e097 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -5,8 +5,11 @@
 </template>
 
 <script>
-export default {
 
+export default {
+  components: {
+    
+  }
 }
 </script>
 
diff --git a/src/view/SearchResultsPage.vue b/src/view/SearchResultsPage.vue
deleted file mode 100644
index 1eca7ca..0000000
--- a/src/view/SearchResultsPage.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div class="container my-5">
-  <h4><b>Resultados para "Lorem ipsum"</b></h4>
-  <p>Hay 3 productos</p>
-  <div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img src="../img/bookOne.jpg" class="card-img-top" alt="...">
-        <div class="card-body text-center">
-            <p class="card-text">Some quick example text to build on the card title and...</p>
-            <span><b>$180</b></span>
-        </div>
-    </div>
-
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img src="../img/bookOne.jpg" class="card-img-top" alt="...">
-        <div class="card-body text-center">
-            <p class="card-text">Some quick example text to build on the card title and...</p>
-            <span><b>$180</b></span>
-        </div>
-    </div>
-
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img src="../img/bookOne.jpg" class="card-img-top" alt="...">
-        <div class="card-body text-center">
-            <p class="card-text">Some quick example text to build on the card title and...</p>
-            <span><b>$180</b></span>
-        </div>
-    </div>
-
-  </div>
-  <p>Mostrando 1 - 3 de 3 artículo(s)</p>
-</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style scoped>
-.g-card-sty {
-    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-}
-</style>
\ No newline at end of file