diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
index 54f29ae5119b9..0b3919ca55132 100644
--- a/web/src/components/ActivityCalendar.tsx
+++ b/web/src/components/ActivityCalendar.tsx
@@ -17,15 +17,15 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
   if (count === 0) {
     return "";
   }
-  if (count >= 3) {
-    const ratio = count / maxCount;
-    if (ratio > 0.7) {
-      return "bg-primary-darker/80 text-gray-100 dark:opacity-80";
-    } else if (ratio > 0.4) {
-      return "bg-primary/80 text-gray-100 dark:opacity-80";
-    }
+  const ratio = count / maxCount;
+  if (ratio > 0.75) {
+    return "bg-primary-darker/90 text-gray-100 dark:bg-primary-lighter/80";
+  } else if (ratio > 0.5) {
+    return "bg-primary-darker/70 text-gray-100 dark:bg-primary-lighter/60";
+  } else if (ratio > 0.25) {
+    return "bg-primary/70 text-gray-100 dark:bg-primary-lighter/40";
   } else {
-    return "bg-primary/70 text-gray-100 dark:opacity-70";
+    return "bg-primary/50 text-gray-100 dark:bg-primary-lighter/20";
   }
 };
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 03cd3ac1338e0..e2e21fbdedff9 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
           DEFAULT: "#0d9488", // Teal 600
           dark: "#0f766e", // Teal 700
           darker: "#0d5a56", // Teal 800
+          lighter: "#14b8a6", // Teal 500
         },
         success: {
           DEFAULT: "#16a34a", // Green 600