diff --git a/src/app/globals.css b/src/app/globals.css
index 568a6aee1..a3c70f988 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -94,7 +94,7 @@
   --secondary: #44475a;
   --secondary-foreground: #f8f8f2;
   --muted: #44475a;
-  --muted-foreground: #f8f8f2;
+  --muted-foreground: #9aa3b3;
   --accent: #44475a;
   --accent-foreground: #f8f8f2;
   --destructive: #ff5555;
@@ -131,7 +131,7 @@
   --secondary: #dcdeef;
   --secondary-foreground: #1f1f1f;
   --muted: #dcdeef;
-  --muted-foreground: #1f1f1f;
+  --muted-foreground: #5b6273;
   --accent: #dcdeef;
   --accent-foreground: #1f1f1f;
   --destructive: #cb3a2a;
diff --git a/src/components/charts/trend-card.tsx b/src/components/charts/trend-card.tsx
index 4ca248a9a..155f5d6e2 100644
--- a/src/components/charts/trend-card.tsx
+++ b/src/components/charts/trend-card.tsx
@@ -82,7 +82,7 @@ export function TrendCard({
   };
 
   return (
-    <div className="bg-card border-border flex h-full flex-col rounded-xl border p-3">
+    <div className="bg-card border-border flex h-full w-full flex-col rounded-xl border p-3">
       <div className="flex items-center justify-between">
         <span className="text-muted-foreground text-sm font-medium">
           {label}