diff --git a/client/src/components/Entry.tsx b/client/src/components/Entry.tsx
index 8a9c3fa..25b65d4 100644
--- a/client/src/components/Entry.tsx
+++ b/client/src/components/Entry.tsx
@@ -26,6 +26,7 @@ export function Entry({ entry }: EntryProps) {
 
   const isValidEntry = entry.day <= today.day && entry.day >= 1;
 
+  // Handle click
   function handleClick() {
     if (isValidEntry) {
       const id = selectedEntryId === entry._id ? null : entry._id;
@@ -38,7 +39,12 @@ export function Entry({ entry }: EntryProps) {
     <div
       className={cn(
         "flex size-6 shrink-0 items-center justify-center rounded-[4px] bg-stone-300/50 text-sm",
-        currentRating > 0 && statusColor(currentRating),
+        // currentRating > 0 && statusColor(currentRating),
+        (currentRating === 1 || currentRating === 2) && "bg-stone-400/50",
+        (currentRating === 3 || currentRating === 4) && "bg-stone-400",
+        (currentRating === 5 || currentRating === 6) && "bg-stone-500",
+        (currentRating === 7 || currentRating === 8) && "bg-stone-600",
+        (currentRating === 9 || currentRating === 10) && "bg-stone-800",
         isValidEntry && "hover:border hover:border-brown-600",
         selectedEntryId === entry._id
           ? "border border-brown-600"