diff --git a/web/package-lock.json b/web/package-lock.json
index c08aab19..6a9a2bde 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@mdi/font": "^5.9.55",
-        "ansi-to-html": "^0.7.2",
+        "ansi_up": "^6.0.2",
         "axios": "^0.28.0",
         "core-js": "^3.23.2",
         "cron-parser": "^4.9.0",
@@ -3691,6 +3691,14 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/ansi_up": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-6.0.2.tgz",
+      "integrity": "sha512-3G3vKvl1ilEp7J1u6BmULpMA0xVoW/f4Ekqhl8RTrJrhEBkonKn5k3bUc5Xt+qDayA6iDX0jyUh3AbZjB/l0tw==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -3741,20 +3749,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/ansi-to-html": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
-      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
-      "dependencies": {
-        "entities": "^2.2.0"
-      },
-      "bin": {
-        "ansi-to-html": "bin/ansi-to-html"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/ansi-wrap": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
@@ -7275,6 +7269,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -24236,6 +24231,11 @@
       "dev": true,
       "requires": {}
     },
+    "ansi_up": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-6.0.2.tgz",
+      "integrity": "sha512-3G3vKvl1ilEp7J1u6BmULpMA0xVoW/f4Ekqhl8RTrJrhEBkonKn5k3bUc5Xt+qDayA6iDX0jyUh3AbZjB/l0tw=="
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -24268,14 +24268,6 @@
         "color-convert": "^1.9.0"
       }
     },
-    "ansi-to-html": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
-      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
-      "requires": {
-        "entities": "^2.2.0"
-      }
-    },
     "ansi-wrap": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
@@ -27033,7 +27025,8 @@
     "entities": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
     },
     "errno": {
       "version": "0.1.8",
diff --git a/web/package.json b/web/package.json
index 439f60a9..bd7f7369 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "^5.9.55",
-    "ansi-to-html": "^0.7.2",
+    "ansi_up": "^6.0.2",
     "axios": "^0.28.0",
     "core-js": "^3.23.2",
     "cron-parser": "^4.9.0",
diff --git a/web/src/main.js b/web/src/main.js
index f33771d9..0efa12a3 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,33 +1,36 @@
 import Vue from 'vue';
 import moment from 'moment';
 import axios from 'axios';
-import Convert from 'ansi-to-html';
+import { AnsiUp } from 'ansi_up';
 import App from './App.vue';
 import router from './router';
 import vuetify from './plugins/vuetify';
 import './assets/scss/main.scss';
 import i18n from './plugins/i18';
 
-const convert = new Convert({
-  colors: {
-    0: '#000',
-    1: '#A00',
-    2: '#0A0',
-    3: '#A50',
-    4: '#2196f3',
-    5: '#A0A',
-    6: '#0AA',
-    7: '#AAA',
-    8: '#555',
-    9: '#F55',
-    10: '#5F5',
-    11: '#FF5',
-    12: '#55F',
-    13: '#F5F',
-    14: '#5FF',
-    15: '#FFF',
-  },
-});
+const convert = new AnsiUp();
+convert.ansi_colors = [
+  [
+    { rgb: [0, 0, 0], class_name: 'ansi-black' },
+    { rgb: [170, 0, 0], class_name: 'ansi-red' },
+    { rgb: [0, 170, 0], class_name: 'ansi-green' },
+    { rgb: [170, 85, 0], class_name: 'ansi-yellow' },
+    { rgb: [33, 150, 243], class_name: 'ansi-blue' },
+    { rgb: [170, 0, 170], class_name: 'ansi-magenta' },
+    { rgb: [0, 170, 170], class_name: 'ansi-cyan' },
+    { rgb: [170, 170, 170], class_name: 'ansi-white' },
+  ],
+  [
+    { rgb: [85, 85, 85], class_name: 'ansi-bright-black' },
+    { rgb: [255, 85, 85], class_name: 'ansi-bright-red' },
+    { rgb: [85, 255, 85], class_name: 'ansi-bright-green' },
+    { rgb: [255, 255, 85], class_name: 'ansi-bright-yellow' },
+    { rgb: [85, 85, 255], class_name: 'ansi-bright-blue' },
+    { rgb: [255, 85, 255], class_name: 'ansi-bright-magenta' },
+    { rgb: [85, 255, 255], class_name: 'ansi-bright-cyan' },
+    { rgb: [255, 255, 255], class_name: 'ansi-bright-white' },
+  ],
+];
 
 axios.defaults.baseURL = document.baseURI;
 Vue.config.productionTip = false;
@@ -45,7 +48,7 @@ Vue.filter('formatDate', (value) => {
   return date.format('L HH:mm'); // Display only date otherwise
 });
 Vue.filter('formatTime', (value) => (value ? moment(String(value)).format('LTS') : '—'));
-Vue.filter('formatLog', (value) => (value ? convert.toHtml(String(value)) : value));
+Vue.filter('formatLog', (value) => (value ? convert.ansi_to_html(String(value)) : value));
 
 Vue.filter('formatMilliseconds', (value) => {
   if (value == null || value === '') {