diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
index 439fcee32..d8cf51a88 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
@@ -1,6 +1,7 @@
 import { IssueCategory } from 'App/types/filter/filterType';
 import React from 'react';
 import { Icon } from 'UI';
+import cn from 'classnames';
 
 interface Props {
   item: any;
@@ -27,6 +28,25 @@ function InsightItem(props: Props) {
 
 export default InsightItem;
 
+
+function Change({ change, isIncreased }: any) {
+  return (
+    <div
+      className={cn('font-medium flex items-center', {
+        'text-red': isIncreased,
+        'text-tealx': !isIncreased,
+      })}
+    >
+      <Icon
+        name={isIncreased ? 'arrow-up-short' : 'arrow-down-short'}
+        color={isIncreased ? 'red' : 'tealx'}
+        size={20}
+      />
+      {change}%
+    </div>
+  );
+}
+
 function ErrorItem({ item, className, onClick }: any) {
   return (
     <div className={className} onClick={onClick}>
@@ -43,7 +63,7 @@ function ErrorItem({ item, className, onClick }: any) {
           <div className="mx-1">Increase</div>
           <div className="mx-1">in</div>
           <div className="mx-1">{item.name}</div>
-          <div className="mx-1 font-medium color-red">{item.change}%</div>
+          <Change change={item.change} isIncreased={item.isIncreased} />
         </>
       )}
     </div>
@@ -57,7 +77,7 @@ function NetworkItem({ item, className, onClick }: any) {
       <div className="mx-1">Network request</div>
       <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
       <div className="mx-1">{item.change > 0 ? 'increased' : 'decreased'}</div>
-      <div className="font-medium text-red">{item.change}%</div>
+      <Change change={item.change} isIncreased={item.isIncreased} />
     </div>
   );
 }
@@ -69,7 +89,7 @@ function ResourcesItem({ item, className, onClick }: any) {
       <div className="mx-1">{item.change > 0 ? 'Inrease' : 'Decrease'}</div>
       <div className="mx-1">in</div>
       <div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
-      <div className="font-medium text-red">{item.change}%</div>
+      <Change change={item.change} isIncreased={item.isIncreased} />
     </div>
   );
 }
@@ -86,7 +106,7 @@ function RageItem({ item, className, onClick }: any) {
       {!item.isNew && (
         <>
           <div className="mx-1">increase by</div>
-          <div className="mx-1">{item.change}</div>
+          <Change change={item.change} isIncreased={item.isIncreased} />
         </>
       )}
     </div>