diff --git a/dashboard/src/components/ColoredCircle/ColoredCircle.tsx b/dashboard/src/components/ColoredCircle/ColoredCircle.tsx
index 5ed863c..0d739f4 100644
--- a/dashboard/src/components/ColoredCircle/ColoredCircle.tsx
+++ b/dashboard/src/components/ColoredCircle/ColoredCircle.tsx
@@ -5,16 +5,22 @@ import { ComponentType } from '../ListingComponentItem/ListingComponentItem';
 interface IColoredCircle {
   quantity: number;
   type: ComponentType;
+  className?: string;
 }
 
-const ColoredCircle = ({ quantity, type }: IColoredCircle): JSX.Element => {
+const ColoredCircle = ({
+  quantity,
+  type,
+  className,
+}: IColoredCircle): JSX.Element => {
   const backgroundColor =
-    type === ComponentType.Error ? 'bg-lightRed' : 'bg-yellow';
+    type === ComponentType.Error ? 'bg-lightRed' : 'bg-lightGreen';
   return (
     <div
       className={classNames(
         backgroundColor,
         'rounded-full text-black h-6 min-w-6 flex justify-center px-1',
+        className,
       )}
     >
       <span className="text-sm">{quantity}</span>
diff --git a/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx b/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx
index 6454de8..cb5ab5c 100644
--- a/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx
+++ b/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx
@@ -12,6 +12,7 @@ export interface IListingComponentItem {
 export enum ComponentType {
   Warning,
   Error,
+  Success,
 }
 
 const ListingComponentItem = ({
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index 3371669..32ee143 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -42,6 +42,9 @@ module.exports = {
         "black": '#000000',
         "lightRed": '#FFBBBB',
         "yellow": '#FFD27C',
+        "lightGreen": '#C9FADA',
+        "green": '#1DDF5D',
+        "red": '#E15739'
       }
     },
   },