diff --git a/frontend/package.json b/frontend/package.json
index 5b835a60..5f19fd7b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/vue-fontawesome": "^0.1.6",
     "@tinymce/tinymce-vue": "^2.0.0",
+    "ansi-to-html": "^0.6.13",
     "axios": "0.18.0",
     "cross-env": "^5.2.0",
     "dayjs": "^1.8.6",
diff --git a/frontend/src/components/ScrollView/LogItem.vue b/frontend/src/components/ScrollView/LogItem.vue
index 5850086f..c54d7c37 100644
--- a/frontend/src/components/ScrollView/LogItem.vue
+++ b/frontend/src/components/ScrollView/LogItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="log-item">
     <div class="line-no">{{index}}</div>
-    <div class="line-content">{{data}}</div>
+    <div class="line-content" ><span v-if="isAnsi" v-html="data">{{data}}</span><span v-else="">{{data}}</span></div>
   </div>
 </template>
 
@@ -16,11 +16,16 @@ export default {
     data: {
       type: String,
       default: ''
+    },
+    isAnsi: {
+      type: Boolean,
+      default: false
     }
   }
 }
 </script>
 
+
 <style scoped>
   .log-item {
     display: table;
diff --git a/frontend/src/components/ScrollView/LogView.vue b/frontend/src/components/ScrollView/LogView.vue
index f7b82f33..fc19edb5 100644
--- a/frontend/src/components/ScrollView/LogView.vue
+++ b/frontend/src/components/ScrollView/LogView.vue
@@ -13,7 +13,9 @@
 <script>
 import LogItem from './LogItem'
 import VirtualList from 'vue-virtual-scroll-list'
-
+import Convert from 'ansi-to-html'
+import hasAnsi from 'has-ansi'
+const convert = new Convert();
 export default {
   name: 'LogView',
   components: {
@@ -44,12 +46,14 @@ export default {
   methods: {
     getItemProps (index) {
       const logItem = this.logData[index]
+      const isAnsi = hasAnsi(logItem.data)
       return {
         // <item/> will render with itemProps.
         // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
         props: {
           index: logItem.index,
-          data: logItem.data
+          data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
+          isAnsi,
         }
       }
     }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 12175086..8697e8e2 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1168,6 +1168,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-to-html@^0.6.13:
+  version "0.6.13"
+  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.13.tgz#c72eae8b63e5ca0643aab11bfc6e6f2217425833"
+  integrity sha512-Ys2/umuaTlQvP9DLkaa7UzRKF2FLrfod/hNHXS9QhXCrw7seObG6ksOGmNz3UoK+adwM8L9vQfG7mvaxfJ3Jvw==
+  dependencies:
+    entities "^1.1.2"
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/anymatch/download/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -3008,7 +3015,7 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-entities@^1.1.1:
+entities@^1.1.1, entities@^1.1.2:
   version "1.1.2"
   resolved "http://registry.npm.taobao.org/entities/download/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"