diff --git a/cypress/integration/test_filters.spec.js b/cypress/integration/test_filters.spec.js
index aeb9fe92..103d4419 100644
--- a/cypress/integration/test_filters.spec.js
+++ b/cypress/integration/test_filters.spec.js
@@ -10,6 +10,7 @@ describe('Test the filters and search for stories in Home page', () => {
   const selectProduct = (productName) => {
     cy.get(`[data-cy=${productName.split(' ').join('-')}-card]`)
       .click({ force: true })
+    cy.wait(1000)
   }
 
   const setDropdown = (dropdown, value) => {
diff --git a/src/components/ProductList.jsx b/src/components/ProductList.jsx
index 5159cc02..16f533d7 100644
--- a/src/components/ProductList.jsx
+++ b/src/components/ProductList.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
+import { debounce } from 'lodash'
 import userStory from '../services/user_story'
 
 const ProductSkeleton = () => {
@@ -15,6 +16,18 @@ const ProductSkeleton = () => {
   )
 }
 
+const handleProductCardClick = debounce(
+  (product, selected, setProduct) => {
+    if (!selected) {
+      setProduct(product.Name)
+    } else {
+      setProduct('All')
+    }
+  },
+  600,
+  { leading: true, trailing: false }
+)
+
 const ProductCard = ({ product, selected, setProduct }) => {
   return (
     <div
@@ -22,13 +35,7 @@ const ProductCard = ({ product, selected, setProduct }) => {
         selected ? 'product-card-selected' : ''
       }`}
       data-cy={`${product.Name.split(' ').join('-')}-card`}
-      onClick={() => {
-        if (!selected) {
-          setProduct(product.Name)
-        } else {
-          setProduct('All')
-        }
-      }}
+      onClick={() => handleProductCardClick(product, selected, setProduct)}
     >
       <div className='product-logo'>
         <img src={product.logo?.url} alt={`${product.Name} logo`} />