diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 9c11532..093a803 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -54,10 +54,7 @@ function ChartContainer({
       <div
         data-slot="chart"
         data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
+        className={cn("flex justify-center text-xs", className)}
         style={{ position: "relative", overflow: "hidden" }}
         {...props}>
         <ChartStyle id={chartId} config={config} />
diff --git a/src/components/ui/tips.tsx b/src/components/ui/tips.tsx
index 7415dda..b3949a7 100644
--- a/src/components/ui/tips.tsx
+++ b/src/components/ui/tips.tsx
@@ -14,7 +14,7 @@ interface TipsProps {
 
 const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
   size = "16",
-  color = "gray",
+  color = "var(--theme-text-muted-color)",
   trigger,
   children,
   side = "bottom",
@@ -68,13 +68,15 @@ const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
             sideOffset={5}
             onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
             onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}
-            className="purcarte-blur theme-card-style z-50 text-muted-foreground"
+            className="purcarte-blur theme-card-style z-50"
             style={{
               minWidth: isMobile ? "12rem" : "16rem",
               maxWidth: isMobile ? "80vw" : "16rem",
               backgroundColor: "var(--card)",
             }}>
-            <div className="relative text-sm">{children}</div>
+            <div className="relative text-sm text-secondary-foreground">
+              {children}
+            </div>
           </Popover.Content>
         </Popover.Root>
       )}
diff --git a/src/index.css b/src/index.css
index 2643b0f..706caa3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -130,8 +130,12 @@
 }
 
 @layer utilities {
+  .dark .radix-themes {
+    --theme-text-muted-color: rgb(from var(--accent-4) r g b / 0.8);
+  }
+
   .radix-themes {
-    --theme-text-muted-color: rgb(from var(--accent-4) r g b / 0.7);
+    --theme-text-muted-color: rgb(from var(--accent-12) r g b / 0.8);
   }
 
   .theme-text-shadow {
@@ -143,7 +147,7 @@
   }
 
   .theme-text-muted {
-    @apply text-(--theme-text-muted-color) text-shadow-sm text-shadow-(color:--accent-foreground)/20;
+    @apply text-(--theme-text-muted-color);
   }
 }
 
diff --git a/src/pages/instance/LoadCharts.tsx b/src/pages/instance/LoadCharts.tsx
index 04bab4c..732517a 100644
--- a/src/pages/instance/LoadCharts.tsx
+++ b/src/pages/instance/LoadCharts.tsx
@@ -260,15 +260,19 @@ const LoadCharts = memo(({ node, hours, liveData }: LoadChartsProps) => {
               data={config.data}
               margin={chartMargin}
               {...chartProps}>
-              <CartesianGrid strokeDasharray="2 4" vertical={false} />
+              <CartesianGrid
+                strokeDasharray="2 4"
+                stroke="var(--muted-foreground)"
+                vertical={false}
+              />
               <XAxis
                 dataKey="time"
                 tickLine={false}
                 axisLine={{
-                  stroke: "var(--theme-text-muted-color) !important",
+                  stroke: "var(--theme-text-muted-color)",
                 }}
                 tick={{
-                  fill: "var(--theme-text-muted-color) !important",
+                  fill: "var(--theme-text-muted-color)",
                 }}
                 tickFormatter={timeFormatter}
                 interval={0}
@@ -283,7 +287,7 @@ const LoadCharts = memo(({ node, hours, liveData }: LoadChartsProps) => {
                 type="number"
                 tick={{
                   dx: -8,
-                  fill: "var(--theme-text-muted-color) !important",
+                  fill: "var(--theme-text-muted-color)",
                 }}
                 width={200}
                 mirror={true}
diff --git a/src/pages/instance/PingChart.tsx b/src/pages/instance/PingChart.tsx
index cc7a7f6..57782ce 100644
--- a/src/pages/instance/PingChart.tsx
+++ b/src/pages/instance/PingChart.tsx
@@ -335,7 +335,11 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
           {pingHistory?.tasks && pingHistory.tasks.length > 0 ? (
             <ResponsiveContainer width="100%" height={400}>
               <LineChart data={chartData} margin={chartMargin}>
-                <CartesianGrid strokeDasharray="2 4" vertical={false} />
+                <CartesianGrid
+                  strokeDasharray="2 4"
+                  stroke="var(--muted-foreground)"
+                  vertical={false}
+                />
                 <XAxis
                   type="number"
                   dataKey="time"