diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.html b/src/app/components/busqueda-productos/busqueda-productos.component.html
index d6352b5..d0695f5 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.html
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.html
@@ -1,21 +1,50 @@
 <div class="row m-0 fade-in">
-    <div class="col-10 p-0">
-      <!-- TOP HEADER -->
-      <app-header></app-header>
-  
-      <!-- NOMBRE DE SECCION -->
-      <div class="row m-0">
-        <div class="col-12 p-0">
-          <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Búsqueda</small></p>
-        </div>
+  <div class="col-10 p-0">
+    <!-- TOP HEADER -->
+    <app-header></app-header>
+
+    <!-- NOMBRE DE SECCION -->
+    <div class="row m-0">
+      <div class="col-12 p-0">
+        <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p>
       </div>
-  
-      <div class="row m-4 d-flex align-items-center">
-  
+    </div>
+
+    <div class="row m-4 d-flex align-items-center">
+
+      <div class="col-sm-7">
+        <!-- SEARCH INPUT -->
+        <div class="form-group search">
+          <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
+          <input
+            type="text"
+            class="form-control form-control-lg rounded-pill px-5"
+            placeholder="Búsqueda productos">
+        </div>
+
+        <div class="row pr-3 vh-50 overflow-scroll">
+          <div
+            class="col-4 p-2"
+            *ngFor="let producto of productos">
+            <div class="card card-effect bg-white rounded-sm shadow border-0">
+              <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
+              <div class="card-body">
+                <p class="h5 text-left m-0">{{producto.variable}}</p>
+                <div class="text-left">
+                  <p class="m-0"><small>ASDASDSADASDSA</small></p>
+                  <p class="m-0"><small>COD. 1222</small></p>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
       </div>
-  
     </div>
-  
-    <!-- SIDEBAR -->
-    <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
-  </div>
\ No newline at end of file
+
+  </div>
+
+  <!-- SIDEBAR -->
+  <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
+</div>
\ No newline at end of file
diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.scss b/src/app/components/busqueda-productos/busqueda-productos.component.scss
index e69de29..7c5c912 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.scss
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.scss
@@ -0,0 +1,13 @@
+.search .form-control-search {
+  position: absolute;
+  z-index: 2;
+  display: block;
+  text-align: center;
+  pointer-events: none;
+  color: #aaa;
+  line-height: inherit;
+}
+
+.vh-50 {
+  height: 70vh !important;
+}
diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.ts b/src/app/components/busqueda-productos/busqueda-productos.component.ts
index cd705f3..73dc2a2 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.ts
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ProductoService } from 'src/app/services/producto.service';
+import { Producto } from 'src/app/wrappers/producto';
 
 @Component({
   selector: 'app-busqueda-productos',
@@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BusquedaProductosComponent implements OnInit {
 
-  constructor() { }
+  productos: Producto[] = [];
+
+  constructor(private productoService: ProductoService) { }
 
   ngOnInit() {
+
+    this.productoService.getAll()
+      .subscribe((data: Producto[]) => {
+
+        this.productos = data;
+      }, (error) => {
+        
+        console.error(error);
+      });
   }
 
 }