diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.html b/src/app/components/busqueda-productos/busqueda-productos.component.html
index a8dc98e..0429e28 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.html
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.html
@@ -16,36 +16,51 @@
     <div class="row m-4 disable-user-select">
 
       <!-- FILTROS -->
-      <div class="col-sm-2">
+      <div class="col-sm-2 p-1">
         <div class="text-center">
           <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
         </div>
         <ul class="list-group">
-          <li class="list-group-item list-group-item-action my-1 py-2 h6">
+          <li
+            [ngClass]="{active: categoria == 1}"
+            (click)="categoria = 1"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6">
             Combos y Promociones
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
+            [ngClass]="{active: categoria == 2}"
+            (click)="categoria = 2"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Todos
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 3}"
+            (click)="categoria = 3"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Bebidas
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 4}"
+            (click)="categoria = 4"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Sandwichería
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 5}"
+            (click)="categoria = 5"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Panaderia
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 6}"
+            (click)="categoria = 6"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Golosinas
           </li>
           <li
-            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            [ngClass]="{active: categoria == 7}"
+            (click)="categoria = 7"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
             Tabaqueria
           </li>
         </ul>
diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.ts b/src/app/components/busqueda-productos/busqueda-productos.component.ts
index 4fea2c0..194be34 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.ts
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.ts
@@ -13,6 +13,7 @@ export class BusquedaProductosComponent implements OnInit {
   auxProductos: Producto[] = [];
   searchTerm: string = '';
   showSpinner: boolean = true;
+  categoria: Categorias = Categorias.todos;
 
   constructor(private productoService: ProductoService) { }
 
@@ -34,3 +35,13 @@ export class BusquedaProductosComponent implements OnInit {
   }
 
 }
+
+enum Categorias {
+  promosCombos = 1,
+  todos = 2,
+  bebidas = 3,
+  sandwicheria = 4,
+  panaderia = 5,
+  golosinas = 6,
+  tabaqueria = 7,
+}