diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx
index 5b64e676..a391168a 100644
--- a/src/components/ProxyPreviewBar.tsx
+++ b/src/components/ProxyPreviewBar.tsx
@@ -44,19 +44,19 @@ export const ProxyPreviewBar = (props: {
     <div class="flex items-center gap-2">
       <div class="my-1 flex flex-1 items-center justify-center overflow-hidden rounded-2xl [&>*]:h-2">
         <div
-          class="bg-success"
+          class="bg-green-600"
           style={{
             width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
           }}
         />
         <div
-          class="bg-warning"
+          class="bg-yellow-500"
           style={{
             width: `${(middle() * 100) / all()}%`,
           }}
         />
         <div
-          class="bg-error"
+          class="bg-red-500"
           style={{
             width: `${(slow() * 100) / all()}%`,
           }}
diff --git a/src/components/ProxyPreviewDots.tsx b/src/components/ProxyPreviewDots.tsx
index 2be38664..be8c2831 100644
--- a/src/components/ProxyPreviewDots.tsx
+++ b/src/components/ProxyPreviewDots.tsx
@@ -8,8 +8,8 @@ const LatencyDot = (props: {
   selected: boolean
 }) => {
   let dotClassName = props.selected
-    ? 'bg-white border-4 border-success'
-    : 'bg-success'
+    ? 'bg-white border-4 border-green-600'
+    : 'bg-green-600'
 
   if (
     typeof props.latency !== 'number' ||
@@ -20,12 +20,12 @@ const LatencyDot = (props: {
       : 'bg-neutral'
   } else if (props.latency > latencyQualityMap().HIGH) {
     dotClassName = props.selected
-      ? 'bg-white border-4 border-error'
-      : 'bg-error'
+      ? 'bg-white border-4 border-red-500'
+      : 'bg-red-500'
   } else if (props.latency > latencyQualityMap().MEDIUM) {
     dotClassName = props.selected
-      ? 'bg-white border-4 border-warning'
-      : 'bg-warning'
+      ? 'bg-white border-4 border-yellow-500'
+      : 'bg-yellow-500'
   }
 
   return (
diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts
index f18a237f..df4578f1 100644
--- a/src/helpers/proxies.ts
+++ b/src/helpers/proxies.ts
@@ -31,13 +31,13 @@ export const formatProxyType = (type = '') => {
 
 export const getLatencyClassName = (latency: LATENCY_QUALITY_MAP_HTTP) => {
   if (latency > latencyQualityMap().HIGH) {
-    return 'text-error'
+    return 'text-red-500'
   } else if (latency > latencyQualityMap().MEDIUM) {
-    return 'text-warning'
+    return 'text-yellow-500'
   } else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) {
     return 'text-gray'
   } else {
-    return 'text-success'
+    return 'text-green-600'
   }
 }