diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index b9715bcf0988359f4b636b3c1dfbb2b73e7616c4..023f706c6b3c946b4bc2631a5f4216797b0b0c7d 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -233,7 +233,7 @@ export default function Header({ connection, setConnection, experimentInfo }) {
           <div style={{ width: '60px', textAlign: 'center' }}>
             <div style={{ width: '60px', position: 'absolute', opacity: 0.6 }}>
               <Sparklines height={20} width={60} data={cs.gpu}>
-                <SparklinesLine color="red" />
+                <SparklinesLine color="var(--joy-palette-danger-500)" />
               </Sparklines>
             </div>
             {Math.round(cs.gpu[cs.gpu.length - 1])}%
diff --git a/src/renderer/components/ModelZoo/LocalModels.tsx b/src/renderer/components/ModelZoo/LocalModels.tsx
index 71c33eed6169de0e0ad171acd90802d4dbedff7f..7faae12286d77e047a16d0e2509740d35f5088b6 100644
--- a/src/renderer/components/ModelZoo/LocalModels.tsx
+++ b/src/renderer/components/ModelZoo/LocalModels.tsx
@@ -316,7 +316,7 @@ export default function LocalModels({
                         />
                         &nbsp;
                         <Trash2Icon
-                          color="red"
+                          color="var(--joy-palette-danger-600)"
                           onClick={() => {
                             mutate();
                           }}