diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 0b98b3e6b..031b769f1 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -16,7 +16,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
   const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
 
   const priorityClasses = {
-    urgent: "bg-red-500 text-red-500 border-red-500",
+    urgent: "bg-red-600 text-red-500 border-red-600",
     high: "bg-orange-500/20 text-orange-500 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
@@ -40,7 +40,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
       {withContainer ? (
         <div
           className={cn(
-            "grid place-items-center border rounded p-0.5 flex-shrink-0",
+            "flex items-center justify-center border rounded p-0.5 flex-shrink-0",
             priorityClasses[priority],
             containerClassName
           )}
@@ -63,8 +63,9 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
         <Icon
           size={size}
           className={cn(
+            "flex-shrink-0",
             {
-              "text-red-500": priority === "urgent",
+              "text-red-600": priority === "urgent",
               "text-orange-500": priority === "high",
               "text-yellow-500": priority === "medium",
               "text-custom-primary-100": priority === "low",
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index 49dd5b2c5..d16e31f26 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -79,7 +79,7 @@ const BorderButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -88,7 +88,7 @@ const BorderButton = (props: ButtonProps) => {
           <div
             className={cn({
               // highlight just the icon if text is visible and priority is urgent
-              "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+              "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
             })}
           >
             <PriorityIcon
@@ -155,7 +155,7 @@ const BackgroundButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -164,7 +164,7 @@ const BackgroundButton = (props: ButtonProps) => {
           <div
             className={cn({
               // highlight just the icon if text is visible and priority is urgent
-              "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+              "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
             })}
           >
             <PriorityIcon
@@ -232,7 +232,7 @@ const TransparentButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
             "bg-custom-background-80": isActive,
           },
           className
@@ -242,7 +242,7 @@ const TransparentButton = (props: ButtonProps) => {
           <div
             className={cn({
               // highlight just the icon if text is visible and priority is urgent
-              "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+              "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
             })}
           >
             <PriorityIcon