diff --git a/plugins/harness-ccm/src/components/CostCard/CostCard.tsx b/plugins/harness-ccm/src/components/CostCard/CostCard.tsx
index f58f1cd..be1c326 100644
--- a/plugins/harness-ccm/src/components/CostCard/CostCard.tsx
+++ b/plugins/harness-ccm/src/components/CostCard/CostCard.tsx
@@ -35,7 +35,6 @@ const useStyles = makeStyles({
   trendCtn: {
     display: 'flex',
     alignItems: 'center',
-    paddingRight: 4,
   },
 });
 
@@ -80,13 +79,13 @@ const CostCard: React.FC<CostCardProps> = ({
         </div>
         {statsTrend ? (
           <div
-            style={{ color: statsTrend >= 0 ? '#4dc952' : '#e43326' }}
+            style={{ color: statsTrend >= 0 ? '#e43326' : '#4dc952' }}
             className={classes.trendCtn}
           >
             {statsTrend >= 0 ? (
-              <ArrowDropDownOutlinedIcon style={{ color: '#4dc952' }} />
-            ) : (
               <ArrowDropUpOutlinedIcon style={{ color: '#e43326' }} />
+            ) : (
+              <ArrowDropDownOutlinedIcon style={{ color: '#4dc952' }} />
             )}
             {statsTrend < 0 ? statsTrend * -1 : statsTrend}%
           </div>
diff --git a/plugins/harness-ccm/src/components/PerspectivesGrid/PerspectivesGrid.tsx b/plugins/harness-ccm/src/components/PerspectivesGrid/PerspectivesGrid.tsx
index 96aab22..6a79113 100644
--- a/plugins/harness-ccm/src/components/PerspectivesGrid/PerspectivesGrid.tsx
+++ b/plugins/harness-ccm/src/components/PerspectivesGrid/PerspectivesGrid.tsx
@@ -32,9 +32,9 @@ const columns: TableColumn[] = [
       <Typography>
         <div style={{ display: 'flex', alignItems: 'center' }}>
           {rowData.costTrend >= 0 ? (
-            <ArrowDownwardOutlinedIcon style={{ color: '#4dc952' }} />
-          ) : (
             <ArrowUpwardOutlinedIcon style={{ color: '#e43326' }} />
+          ) : (
+            <ArrowDownwardOutlinedIcon style={{ color: '#4dc952' }} />
           )}
           {rowData.costTrend < 0 ? rowData.costTrend * -1 : rowData.costTrend}%
         </div>