diff --git a/src/workbench/browser/src/app/pages/api/history/eo-history.component.html b/src/workbench/browser/src/app/pages/api/history/eo-history.component.html
index 406ab9dbe..0fa1fea0a 100644
--- a/src/workbench/browser/src/app/pages/api/history/eo-history.component.html
+++ b/src/workbench/browser/src/app/pages/api/history/eo-history.component.html
@@ -14,7 +14,7 @@
   <section class="flex-1 px-2 overflow-auto">
     <div *ngFor="let item of historyList" class="flex items-center h-8 p-2 text-xs cursor-pointer hover:bg-gray-100"
       (click)="gotoTestHistory(item)">
-      <span class="block w-12 font-light method_type" [ngClass]="methodColor(item.request.method)">{{
+      <span class="block w-12 font-light method_type" [ngClass]="'method_text_' + item.request.method">{{
         item.request.method
         }}</span>
       <span class="flex-1 overflow-hidden text-gray-600 truncate">{{ item.request.uri }}</span>
diff --git a/src/workbench/browser/src/app/pages/api/history/eo-history.component.scss b/src/workbench/browser/src/app/pages/api/history/eo-history.component.scss
index 1e1224615..b024a1e86 100644
--- a/src/workbench/browser/src/app/pages/api/history/eo-history.component.scss
+++ b/src/workbench/browser/src/app/pages/api/history/eo-history.component.scss
@@ -1,17 +1,22 @@
-.method_type {
-  &.green {
-    color: green
+  .method_text_GET {
+    color: var(--BLUE_TAG_BG);
   }
-  &.red {
-    color: red
+  .method_text_POST {
+    color: var(--GREEN_TAG_BG);
   }
-  &.blue {
-    color: blue
+  .method_text_DELETE {
+    color: var(--RED_TAG_BG);
   }
-  &.pink {
-    color: pink
+  .method_text_HEAD {
+    color: var(--YELLOW_TAG_BG);
+  }
+  .method_text_PATCH {
+    color: var(--ORANGE_TAG_BG);
+  }
+  .method_text_PUT,
+  .method_text_OPTIONS {
+    color: var(--BLACK_TAG_BG);
   }
-}
 
 .icon {
   width: 30px;
@@ -30,4 +35,4 @@
 }
 .history-body {
   height: calc(100vh - 115px);
-}
\ No newline at end of file
+}