diff --git a/src/component/home/Products.jsx b/src/component/home/Products.jsx
index 53266e3..ac63628 100644
--- a/src/component/home/Products.jsx
+++ b/src/component/home/Products.jsx
@@ -42,9 +42,9 @@ export default function Products() {
                 :
                 <div className="row m-b-20">
                     {products && products.map((product, index) => (
-                        <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
                             <Link to={productPath(product?.product_id)}  >
-                                <div className="d-flex align-items-center extraProductCard">
+                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} >
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
diff --git a/src/css/style.scss b/src/css/style.scss
index 1681870..84caa68 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -90,7 +90,14 @@ $today-highlight-bg: #fcf8e3;
 $btn-bg: #8e54e9;
 $btn-border: #8e54e9;
 $event-padding: 10px;
-
+.manage{
+  background-color:lightgreen !important;
+  border-radius: 5px !important;
+}
+.creating{
+  background-color: lightyellow !important;
+  border-radius: 5px !important;
+}
 .billing{
   background-color: darkgoldenrod;
   color: white;