diff --git a/jportal/src/components/AttendanceCard.jsx b/jportal/src/components/AttendanceCard.jsx
index 5b516d5..f6cebf5 100644
--- a/jportal/src/components/AttendanceCard.jsx
+++ b/jportal/src/components/AttendanceCard.jsx
@@ -16,6 +16,17 @@ const AttendanceCard = ({
   const attendancePercentage = attendance.total > 0 ? combined.toFixed(0) : "100";
   const displayName = name.replace(/\s*\([^)]*\)\s*$/, "");
 
+  // Determine the color variant based on attendance status
+  const getProgressVariant = () => {
+    if (classesNeeded > 2) {
+      return "danger"; // Need more than 2 classes - red/danger
+    } else if (classesNeeded > 0) {
+      return "warning"; // Need 1-2 classes - yellow/warning
+    } else {
+      return "primary"; // Can miss classes or on target - primary color
+    }
+  };
+
   const [isLoading, setIsLoading] = useState(false);
   const [selectedDate, setSelectedDate] = useState(null);
 
@@ -118,7 +129,7 @@ const AttendanceCard = ({
             <div className="text-sm">{attendance.total}</div>
           </div>
           <div className="flex flex-col items-center">
-            <CircleProgress key={Date.now()} percentage={attendancePercentage} />
+            <CircleProgress key={Date.now()} percentage={attendancePercentage} variant={getProgressVariant()} />
             {classesNeeded > 0 ? (
               <div className="text-xs mt-1 text-muted-foreground">Attend {classesNeeded}</div>
             ) : (
diff --git a/jportal/src/components/CircleProgress.jsx b/jportal/src/components/CircleProgress.jsx
index 7c144a5..812acd9 100644
--- a/jportal/src/components/CircleProgress.jsx
+++ b/jportal/src/components/CircleProgress.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-function CircleProgress({ percentage, label, className = "" }) {
+function CircleProgress({ percentage, label, className = "", variant = "primary" }) {
   const strokeWidth = 3;
   const defaultRadius = 15;
   const radius = defaultRadius;
@@ -20,6 +20,19 @@ function CircleProgress({ percentage, label, className = "" }) {
     return () => clearTimeout(timer);
   }, [percentage, circumference]);
 
+  // Map variant to CSS variable
+  const getStrokeColor = () => {
+    switch (variant) {
+      case "danger":
+        return "var(--destructive)";
+      case "warning":
+        return "var(--chart-4)";
+      case "primary":
+      default:
+        return "var(--primary)";
+    }
+  };
+
   return (
     <svg className={`w-[80px] h-[80px] ${className}`} viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet">
       <g transform="rotate(-90 25 25)">
@@ -28,7 +41,7 @@ function CircleProgress({ percentage, label, className = "" }) {
           cy="25"
           r={radius}
           fill="transparent"
-          stroke="var(--primary)"
+          stroke={getStrokeColor()}
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={offset}