diff --git a/src/components/CircularWithValueLabel.jsx b/src/components/CircularWithValueLabel.jsx
index c891915..f182629 100644
--- a/src/components/CircularWithValueLabel.jsx
+++ b/src/components/CircularWithValueLabel.jsx
@@ -22,7 +22,7 @@ function CircularProgressWithLabel({ value }) {
   );
 
   const getStyles = (value) => {
-    if (value === Infinity) {
+    if (value === Infinity || Number.isNaN(value)) {
       return {
         gradientColors: theme.colors.gradients.high.colors[theme.palette.mode],
         backgroundColor: theme.colors.gradients.high.background,
@@ -52,7 +52,9 @@ function CircularProgressWithLabel({ value }) {
   };
 
   const processedValue =
-    value === Infinity ? Infinity : value > 100 ? 100 : value > 0 ? value : 0;
+    value === Infinity || isNaN(value)
+      ? Infinity
+      : Math.max(0, Math.min(value, 100));
 
   const { gradientColors, backgroundColor, typographyGradient } =
     getStyles(value);
@@ -61,7 +63,7 @@ function CircularProgressWithLabel({ value }) {
     <Box sx={{ position: "relative", display: "inline-flex" }}>
       <CircularProgress
         variant="determinate"
-        value={processedValue}
+        value={processedValue === Infinity ? 100 : processedValue}
         size={85}
         sx={{
           color: "transparent",
diff --git a/src/components/UsageBox.jsx b/src/components/UsageBox.jsx
index 9c1de92..0d831e0 100644
--- a/src/components/UsageBox.jsx
+++ b/src/components/UsageBox.jsx
@@ -16,7 +16,7 @@ const UsageBox = ({ type, value, total, remaining }) => {
   };
 
   const getTypographyGradient = (v) => {
-    if (v === Infinity) {
+    if (v === Infinity || Number.isNaN(v)) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;
     } else if (v <= 30) {
       return `linear-gradient(0deg, ${theme.palette.success.main}, ${theme.palette.success.dark})`;