From 9cd4924e9edc4c7fd83464f25b1c05421d5475f7 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Tue, 6 Dec 2022 12:03:24 +0100
Subject: [PATCH] feat(ui): reintroduce all styles

---
 .../models/triggers/types/ScheduleTest.java   |   2 +-
 ui/src/App.vue                                |  21 +-
 ui/src/components/ErrorToast.vue              |  79 ++
 ui/src/components/Id.vue                      |   2 +-
 ui/src/components/Kicon.vue                   |  10 +-
 ui/src/components/Status.vue                  |   1 -
 ui/src/components/Tabs.vue                    |  93 +-
 ui/src/components/customToast.vue             |  64 --
 ui/src/components/errors/Errors.vue           |   2 +-
 ui/src/components/executions/ChangeStatus.vue |  10 +-
 .../components/executions/ExecutionOutput.vue |   3 +-
 .../components/executions/ExecutionRoot.vue   |  38 +-
 ui/src/components/executions/Executions.vue   |   2 +-
 ui/src/components/executions/Gantt.vue        | 113 ++-
 ui/src/components/executions/Kill.vue         |   2 +-
 ui/src/components/executions/Logs.vue         |  17 +-
 ui/src/components/executions/Metrics.vue      |  15 +-
 ui/src/components/executions/Outputs.vue      |  13 +-
 ui/src/components/executions/Overview.vue     |   2 +-
 ui/src/components/executions/Restart.vue      |  13 +-
 ui/src/components/executions/VarValue.vue     |  17 +-
 ui/src/components/executions/Vars.vue         |   5 +-
 ui/src/components/flows/FlowEdit.vue          |  34 +-
 ui/src/components/flows/FlowRevisions.vue     |  24 +-
 ui/src/components/flows/FlowRoot.vue          |   4 +-
 ui/src/components/flows/FlowRun.vue           |  15 +-
 ui/src/components/flows/FlowSource.vue        |   1 +
 ui/src/components/flows/Flows.vue             |  37 +-
 ui/src/components/flows/FlowsSearch.vue       |   2 +-
 ui/src/components/flows/Schedule.vue          |   6 +-
 ui/src/components/flows/ScheduleItem.vue      |   8 +-
 ui/src/components/flows/SubFlowLink.vue       |  14 +-
 ui/src/components/flows/TriggerAvatar.vue     |  21 +-
 ui/src/components/flows/TriggerFlow.vue       |  16 +-
 ui/src/components/graph/TopologyTree.vue      |   6 +-
 ui/src/components/graph/TreeNode.vue          | 206 ++---
 ui/src/components/inputs/Editor.vue           | 110 ++-
 ui/src/components/layout/BottomLine.vue       |  10 +-
 ui/src/components/layout/Collapse.vue         |   2 +-
 ui/src/components/layout/Cytoscape.vue        |  22 +-
 ui/src/components/layout/DataTable.vue        |   2 +-
 ui/src/components/layout/DateAgo.vue          |   8 +-
 ui/src/components/layout/DateRange.vue        |  51 --
 ui/src/components/layout/Duration.vue         |   2 +-
 ui/src/components/layout/Labels.vue           |  15 +-
 ui/src/components/layout/Markdown.vue         |  13 +-
 ui/src/components/layout/MarkdownTooltip.vue  |   2 +
 ui/src/components/layout/News.vue             | 111 +--
 ui/src/components/layout/Pagination.vue       |  55 +-
 ui/src/components/layout/RefreshButton.vue    |  33 -
 ui/src/components/layout/SearchField.vue      |  41 +-
 ui/src/components/layout/TopNavBar.vue        | 105 +--
 ui/src/components/logs/LogLevelSelector.vue   |   4 +-
 ui/src/components/logs/LogLine.vue            | 109 ++-
 ui/src/components/logs/LogList.vue            | 140 ++-
 ui/src/components/logs/LogsWrapper.vue        |  42 +-
 .../components/namespace/NamespaceSelect.vue  |  23 -
 ui/src/components/plugins/Plugin.vue          |  20 +-
 ui/src/components/plugins/TaskIcon.vue        |  18 +-
 ui/src/components/plugins/Toc.vue             | 110 ++-
 ui/src/components/settings/Settings.vue       |   2 -
 ui/src/components/stats/DurationChart.vue     |   3 +
 ui/src/components/stats/StateChart.vue        |   3 +
 ui/src/components/stats/StateGlobalChart.vue  |  38 +-
 ui/src/components/taskruns/TaskRuns.vue       |   4 +-
 ui/src/components/templates/TemplateEdit.vue  |  20 +-
 ui/src/components/templates/Templates.vue     |  20 +-
 ui/src/main.js                                |   1 -
 ui/src/mixins/restoreUrl.js                   |   5 +
 ui/src/override/components/LeftMenu.vue       |  28 +-
 ui/src/override/components/flows/FlowEdit.vue |   8 +
 ui/src/override/components/flows/TaskEdit.vue |  17 +-
 ui/src/stores/core.js                         |   8 -
 ui/src/stores/settings.js                     |  10 -
 ui/src/stores/store.js                        |   2 -
 ui/src/styles/_dark.scss                      |  81 --
 ui/src/styles/_global.scss                    | 103 ---
 ui/src/styles/_light.scss                     |  81 --
 ui/src/styles/_theme-dark.scss                |  20 +
 ui/src/styles/_variable.scss                  | 228 ++---
 ui/src/styles/app.scss                        | 105 +--
 .../components/vue-material-design-icon.scss  |   5 +
 ui/src/styles/components/vue-nprogress.scss   |   1 +
 ui/src/styles/layout/app.scss                 |  37 -
 ui/src/styles/layout/bootstrap.scss           | 854 +-----------------
 ui/src/styles/layout/charts.scss              |   4 +-
 .../styles/layout/element-plus-overload.scss  | 446 +++++++++
 ui/src/styles/layout/elment-plus.scss         | 115 ---
 ui/src/styles/layout/html-tag.scss            |  34 +
 ui/src/styles/layout/navfilter.scss           |   3 -
 ui/src/styles/layout/reset.scss               |  28 -
 ui/src/styles/layout/root-dark.scss           |  51 ++
 ui/src/styles/layout/root.scss                | 119 ++-
 ui/src/styles/vendor.scss                     |  64 +-
 ui/src/utils/http.js                          |   7 +-
 ui/src/utils/toast.js                         |  57 +-
 96 files changed, 1790 insertions(+), 2788 deletions(-)
 create mode 100644 ui/src/components/ErrorToast.vue
 delete mode 100644 ui/src/components/customToast.vue
 delete mode 100644 ui/src/stores/settings.js
 delete mode 100644 ui/src/styles/_dark.scss
 delete mode 100644 ui/src/styles/_global.scss
 delete mode 100644 ui/src/styles/_light.scss
 create mode 100644 ui/src/styles/_theme-dark.scss
 delete mode 100644 ui/src/styles/layout/app.scss
 create mode 100644 ui/src/styles/layout/element-plus-overload.scss
 delete mode 100644 ui/src/styles/layout/elment-plus.scss
 create mode 100644 ui/src/styles/layout/html-tag.scss
 delete mode 100644 ui/src/styles/layout/navfilter.scss
 delete mode 100644 ui/src/styles/layout/reset.scss
 create mode 100644 ui/src/styles/layout/root-dark.scss

diff --git a/core/src/test/java/io/kestra/core/models/triggers/types/ScheduleTest.java b/core/src/test/java/io/kestra/core/models/triggers/types/ScheduleTest.java
index c05701ff175..b5184d01e6f 100644
--- a/core/src/test/java/io/kestra/core/models/triggers/types/ScheduleTest.java
+++ b/core/src/test/java/io/kestra/core/models/triggers/types/ScheduleTest.java
@@ -357,7 +357,7 @@ void timezone() throws Exception {
 
         ZonedDateTime date = ZonedDateTime.now()
             .withZoneSameLocal(ZoneId.of("America/New_York"))
-            .withMonth(ZonedDateTime.now().getMonthValue() + 1)
+            .withMonth(5)
             .withDayOfMonth(1)
             .withHour(9)
             .withMinute(12)
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 95ceb0e6e76..54c9ca1bf93 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <el-config-provider>
         <left-menu @menu-collapse="onMenuCollapse" />
-        <custom-toast v-if="message" :no-auto-hide="true" :message="message" />
+        <error-toast v-if="message" :no-auto-hide="true" :message="message" />
         <main :class="menuCollapsed">
             <top-nav-bar :menu-collapsed="menuCollapsed" />
             <router-view v-if="!error" />
@@ -9,14 +9,13 @@
                 <errors :code="error" />
             </template>
         </main>
-        <div id="theme-loaded" />
     </el-config-provider>
 </template>
 
 <script>
     import LeftMenu from "override/components/LeftMenu.vue";
     import TopNavBar from "./components/layout/TopNavBar";
-    import CustomToast from "./components/customToast";
+    import ErrorToast from "./components/ErrorToast";
     import Errors from "./components/errors/Errors";
     import {mapState} from "vuex";
     import Utils from "./utils/utils";
@@ -26,7 +25,7 @@
         components: {
             LeftMenu,
             TopNavBar,
-            CustomToast,
+            ErrorToast,
             Errors
         },
         data() {
@@ -36,7 +35,7 @@
             };
         },
         computed: {
-            ...mapState("core", ["message", "error", "themes", "theme"])
+            ...mapState("core", ["message", "error"])
         },
         created() {
             if (this.created === false) {
@@ -109,12 +108,12 @@
     @use 'element-plus/theme-chalk/src/mixins/mixins' as mixin;
 
     main {
-        padding-right: 15px;
-        padding-left: 15px;
+        padding-right: var(--spacer);
+        padding-left: var(--spacer);
         margin-right: auto;
         margin-left: auto;
 
-        padding-top: 15px;
+        padding-top: var(--spacer);
         padding-bottom: 60px !important;
         transition: all 0.3s ease;
 
@@ -123,11 +122,11 @@
         }
 
         &.menu-not-collapsed {
-            padding-left: calc(mixin.getCssVar('menu-width') + 15px);
+            padding-left: calc(var(--menu-width) + var(--spacer));
 
             @include mixin.res(lg) {
-                padding-left: calc(mixin.getCssVar('menu-width') + 40px + 15px);
-                padding-right: 40px;
+                padding-left: calc(var(--menu-width) + (var(--spacer) * 4));
+                padding-right: calc(var(--spacer) * 4);
             }
         }
     }
diff --git a/ui/src/components/ErrorToast.vue b/ui/src/components/ErrorToast.vue
new file mode 100644
index 00000000000..e0ce92b89be
--- /dev/null
+++ b/ui/src/components/ErrorToast.vue
@@ -0,0 +1,79 @@
+<script>
+    import {ElNotification, ElTable, ElTableColumn} from "element-plus";
+    import {h} from 'vue'
+
+    export default {
+        name: "ErrorToast",
+        props: {
+            message: {
+                type: Object,
+                required: true
+            },
+            noAutoHide: {
+                type: Boolean,
+                default: false
+            }
+        },
+        notifications: [],
+        watch: {
+            $route() {
+                this.notifications.forEach((item) => {
+                    item.close()
+                });
+            },
+        },
+        computed: {
+            text () {
+                return this.message.message || this.message.content.message
+            },
+            title () {
+                return this.message.title || "Error"
+            },
+            items() {
+                const messages = this.message.content && this.message.content._embedded && this.message.content._embedded.errors ? this.message.content._embedded.errors : []
+                return Array.isArray(messages) ? messages : [messages]
+            },
+        },
+        render() {
+            this.$nextTick(() => {
+                const children = [
+                    h('span', {innerHTML: this.text})
+                ];
+
+                if (this.items.length > 0) {
+                    children.push(h(
+                        ElTable,
+                        {
+                            stripe: true,
+                            tableLayout: "auto",
+                            fixed: true,
+                            data: this.items,
+                            class: ["mt-2"],
+                            size: "small",
+                        },
+                        [
+                            h(ElTableColumn, {prop: 'message', label: "Message"}),
+                            h(ElTableColumn, {prop: 'path', label: "Path"}),
+                        ]
+                    ))
+                }
+
+                const current = ElNotification({
+                    title: this.title || "Error",
+                    message: h('div',  children),
+                    type: "error",
+                    duration: 0,
+                    dangerouslyUseHTMLString: true,
+                    customClass: "large"
+                });
+
+                if (this.notifications === undefined) {
+                    this.notifications = [];
+                }
+
+                this.notifications.push(current);
+            });
+        }
+    };
+</script>
+
diff --git a/ui/src/components/Id.vue b/ui/src/components/Id.vue
index 43904bc9538..0519a0ec940 100644
--- a/ui/src/components/Id.vue
+++ b/ui/src/components/Id.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-tooltip transition="" :hide-after="0" placement="top">
+    <el-tooltip transition="" :hide-after="0" :persistent="false" placement="top">
         <template #content><code>{{ value }}</code></template>
         <code :id="uuid" class="text-nowrap">
             {{ transformValue }}
diff --git a/ui/src/components/Kicon.vue b/ui/src/components/Kicon.vue
index ad80c3b08bf..6517b2c8438 100644
--- a/ui/src/components/Kicon.vue
+++ b/ui/src/components/Kicon.vue
@@ -5,6 +5,9 @@
             :content="tooltip"
             :raw-content="true"
             :placement="placement"
+            :persistent="false"
+            transition=""
+            :hide-after="0"
         >
             <slot />
         </el-tooltip>
@@ -27,8 +30,7 @@
 </script>
 
 <style lang="scss" scoped>
-
-.kicon {
-    white-space: nowrap;
-}
+    .kicon {
+        white-space: nowrap;
+    }
 </style>
diff --git a/ui/src/components/Status.vue b/ui/src/components/Status.vue
index a85247d54db..f285c72d7d7 100644
--- a/ui/src/components/Status.vue
+++ b/ui/src/components/Status.vue
@@ -31,7 +31,6 @@
         computed: {
             cls() {
                 return {
-                    ["btn-" + State.colorClass()[this.status] + (this.size ? " btn-" + this.size : "")]: true,
                     "no-label": !this.label
                 }
             },
diff --git a/ui/src/components/Tabs.vue b/ui/src/components/Tabs.vue
index da0a19f7568..cb5e31e2911 100644
--- a/ui/src/components/Tabs.vue
+++ b/ui/src/components/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="card ktr-tabs">
-        <el-tabs v-model="activeName">
+    <div>
+        <el-tabs v-model="activeName" class="mb-3">
             <el-tab-pane
                 v-for="tab in tabs"
                 :key="tab.name"
@@ -76,92 +76,3 @@
     };
 </script>
 
-<style lang="scss">
-@import "../styles/_variable.scss";
-
-.ktr-tabs {
-    transition: all 0.3s ease;
-
-    &.card {
-        background-color: transparent;
-        border: 0;
-    }
-
-    .tabs > .card-header {
-        padding: 0;
-        position: relative;
-
-        > div {
-            padding: $card-spacer-y $card-spacer-x;
-            overflow-x: scroll;
-            overflow-y: hidden;
-            direction: rtl;
-            transform: rotate(180deg);
-
-            &::-webkit-scrollbar {
-                height: 5px;
-            }
-
-            &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
-                background: transparent;
-                transition: 320ms;
-            }
-
-            &::-webkit-scrollbar-thumb:hover {
-                background: $gray-500;
-            }
-
-            .card-header-tabs {
-                margin-top: -11px;
-                direction: ltr;
-                transform: rotate(-180deg);
-            }
-
-            @-moz-document url-prefix() {
-                & {
-                    overflow-x: auto;
-                    .card-header-tabs {
-                        padding-top: 5px;
-                    }
-                }
-            }
-        }
-
-        &:before, &:after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 10px;
-            height: 100%;
-            z-index: 2;
-            background: linear-gradient(to right, rgba(248, 248, 252, 0) 0%, rgba(248, 248, 252, 1) 85%);
-
-            .theme-dark & {
-                background: linear-gradient(to right, rgba(27, 30, 42, 0) 0%, rgb(27, 30, 42) 95%);
-            }
-        }
-
-        &:after {
-            left: 0;
-            background: linear-gradient(to left, rgba(248, 248, 252, 0) 0%, rgba(248, 248, 252, 1) 85%);
-
-            .theme-dark & {
-                background: linear-gradient(to left, rgba(27, 30, 42, 0) 0%, rgb(27, 30, 42) 95%);
-            }
-        }
-
-        &:hover > div::-webkit-scrollbar-thumb {
-            background: var(--secondary);
-        }
-
-        .nav {
-            flex-wrap: nowrap;
-
-            .nav-item {
-                white-space: nowrap;
-            }
-        }
-    }
-}
-</style>
diff --git a/ui/src/components/customToast.vue b/ui/src/components/customToast.vue
deleted file mode 100644
index 99da72b3204..00000000000
--- a/ui/src/components/customToast.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <b-toast @hide="onHide" id="app-toast" :variant="message.variant" solid :no-auto-hide="noAutoHide">
-        <template #toast-title>
-            <div class="d-flex flex-grow-1 align-items-baseline">
-                <strong class="mr-auto" v-html="title" />
-            </div>
-        </template>
-        <span v-html="text" />
-        <b-table
-            class="mt-2 mb-0"
-            small
-            v-if="items && items.length > 0"
-            :responsive="true"
-            striped
-            hover
-            :items="items"
-        />
-    </b-toast>
-</template>
-<script>
-    export default {
-        props: {
-            message: {
-                type: Object,
-                required: true
-            },
-            noAutoHide: {
-                type: Boolean,
-                default: false
-            }
-        },
-        mounted() {
-            this.$bvToast.show("app-toast");
-            if (this.message.timeout) {
-                this.onHide()
-            }
-        },
-        watch: {
-            $route() {
-                this.$bvToast.hide("app-toast");
-            }
-        },
-        computed: {
-            text () {
-                return this.message.message || this.message.content.message
-            },
-            title () {
-                return this.message.title || this.$t("error")
-            },
-            items() {
-                const messages = this.message.content && this.message.content._embedded && this.message.content._embedded.errors ? this.message.content._embedded.errors : []
-                return Array.isArray(messages) ? messages : [messages]
-            }
-        },
-        methods: {
-            onHide() {
-                setTimeout(() => {
-                    this.$store.commit("core/setMessage", undefined);
-                }, this.message.timeout || 1000);
-            }
-        }
-    };
-</script>
-
diff --git a/ui/src/components/errors/Errors.vue b/ui/src/components/errors/Errors.vue
index faa25e70ce3..fb02abd0f2d 100644
--- a/ui/src/components/errors/Errors.vue
+++ b/ui/src/components/errors/Errors.vue
@@ -42,7 +42,7 @@
 
     .errors {
         h2 {
-            margin-bottom: calc(getCssVar('spacer') * 2);
+            margin-bottom: calc(var(--spacer) * 2);
         }
 
         width: 100%;
diff --git a/ui/src/components/executions/ChangeStatus.vue b/ui/src/components/executions/ChangeStatus.vue
index 3c03a6f6ecf..1088f520230 100644
--- a/ui/src/components/executions/ChangeStatus.vue
+++ b/ui/src/components/executions/ChangeStatus.vue
@@ -16,7 +16,7 @@
                 <p v-html="$t('change status confirm', {id: execution.id, task: taskRun.taskId})" />
 
                 <p>
-                    Current status is : <status size="small" class="mr-1" :status="this.taskRun.state.current" />
+                    Current status is : <status size="small" class="me-1" :status="this.taskRun.state.current" />
                 </p>
 
                 <el-select
@@ -31,7 +31,7 @@
                         :disabled="item.disabled"
                     >
                         <template #default>
-                            <status size="small" :label="false" class="mr-1" :status="item.code" />
+                            <status size="small" :label="false" class="me-1" :status="item.code" />
                             <span v-html="item.label" />
                         </template>
                     </el-option>
@@ -61,21 +61,19 @@
         </el-dialog>
     </component>
 </template>
+
 <script>
     import StateMachine from "vue-material-design-icons/StateMachine";
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import Kicon from "../Kicon"
     import State from "../../utils/state";
     import Status from "../../components/Status";
     import ExecutionUtils from "../../utils/executionUtils";
     import {shallowRef} from "vue";
-    import RestartIcon from "vue-material-design-icons/Restart.vue";
-    import PlayBoxMultiple from "vue-material-design-icons/PlayBoxMultiple.vue";
 
     export default {
-        components: {StateMachine, Status, Kicon},
+        components: {StateMachine, Status},
         props: {
             component: {
                 type: String,
diff --git a/ui/src/components/executions/ExecutionOutput.vue b/ui/src/components/executions/ExecutionOutput.vue
index f7dc8fc0a6d..30af8189cf7 100644
--- a/ui/src/components/executions/ExecutionOutput.vue
+++ b/ui/src/components/executions/ExecutionOutput.vue
@@ -19,7 +19,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item>
-                <el-tooltip :content="$t('eval.tooltip')">
+                <el-tooltip :content="$t('eval.tooltip')" :persistent="false" transition="" :hide-after="0">
                     <el-button :disabled="!filter" @click="isModalOpen = !isModalOpen">
                         {{ $t("eval.title") }}
                     </el-button>
@@ -33,6 +33,7 @@
             destroy-on-close
             lock-scroll
             :append-to-body="true"
+            size=""
             :title="$t('eval.title')"
         >
             <template #footer>
diff --git a/ui/src/components/executions/ExecutionRoot.vue b/ui/src/components/executions/ExecutionRoot.vue
index a4a92098099..0f850dd8270 100644
--- a/ui/src/components/executions/ExecutionRoot.vue
+++ b/ui/src/components/executions/ExecutionRoot.vue
@@ -6,11 +6,8 @@
         <bottom-line v-if="canDelete || isAllowedTrigger || isAllowedEdit">
             <ul>
                 <li>
-                    <el-button type="danger" v-if="canDelete" @click="deleteExecution">
-                        <kicon>
-                            <delete />
-                            <span>{{ $t('delete') }}</span>
-                        </kicon>
+                    <el-button :icon="Delete" type="danger" v-if="canDelete" @click="deleteExecution">
+                        {{ $t('delete') }}
                     </el-button>
 
                     <template v-if="isAllowedTrigger">
@@ -18,10 +15,8 @@
                     </template>
 
                     <template v-if="isAllowedEdit">
-                        <el-button @click="editFlow">
-                            <kicon>
-                                <pencil /> {{ $t('edit flow') }}
-                            </kicon>
+                        <el-button :icon="Pencil" @click="editFlow">
+                            {{ $t('edit flow') }}
                         </el-button>
                     </template>
                 </li>
@@ -29,6 +24,12 @@
         </bottom-line>
     </div>
 </template>
+
+<script setup>
+    import Delete from "vue-material-design-icons/Delete";
+    import Pencil from "vue-material-design-icons/Pencil";
+</script>
+
 <script>
     import Gantt from "./Gantt";
     import Overview from "./Overview";
@@ -39,12 +40,10 @@
     import TriggerFlow from "../flows/TriggerFlow";
     import RouteContext from "../../mixins/routeContext";
     import {mapState} from "vuex";
-    import Pencil from "vue-material-design-icons/Pencil";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import Kicon from "../Kicon"
     import Tabs from "../../components/Tabs";
-    import Delete from "vue-material-design-icons/Delete";
+
     import State from "../../utils/state";
 
     export default {
@@ -52,10 +51,7 @@
         components: {
             BottomLine,
             TriggerFlow,
-            Pencil,
-            Kicon,
             Tabs,
-            Delete,
         },
         data() {
             return {
@@ -173,6 +169,12 @@
             },
             routeInfo() {
                 const ns = this.$route.params.namespace;
+                const flowId = this.$route.params.flowId;
+
+                if (!ns || !flowId) {
+                    return {};
+                }
+
                 return {
                     title: this.$route.params.id,
                     breadcrumb: [
@@ -186,12 +188,12 @@
                             }
                         },
                         {
-                            label: `${ns}.${this.$route.params.flowId}`,
+                            label: `${ns}.${flowId}`,
                             link: {
                                 name: "flows/update",
                                 params: {
                                     namespace: ns,
-                                    id: this.$route.params.flowId
+                                    id: flowId
                                 }
                             }
                         },
@@ -201,7 +203,7 @@
                                 name: "flows/update",
                                 params: {
                                     namespace: ns,
-                                    id: this.$route.params.flowId,
+                                    id: flowId,
                                     tab: "executions"
                                 }
                             }
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 170827590a6..d62f4365ee6 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -94,7 +94,7 @@
 
                     <el-table-column :label="$t('triggers')" class-name="shrink">
                         <template #default="scope">
-                            <trigger-avatar :flow="scope.row" />
+                            <trigger-avatar :execution="scope.row" />
                         </template>
                     </el-table-column>
 
diff --git a/ui/src/components/executions/Gantt.vue b/ui/src/components/executions/Gantt.vue
index 3c532fdd9de..90526d8564f 100644
--- a/ui/src/components/executions/Gantt.vue
+++ b/ui/src/components/executions/Gantt.vue
@@ -1,8 +1,8 @@
 <template>
-    <div v-if="execution" class="el-table">
+    <el-card shadow="never" v-if="execution">
         <table>
             <thead>
-                <tr class="bg-light">
+                <tr>
                     <th>
                         <duration :histories="execution.state.histories" />
                     </th>
@@ -14,7 +14,7 @@
             <tbody v-for="currentTaskRun in partialSeries" :key="currentTaskRun.id">
                 <tr>
                     <th>
-                        <el-tooltip placement="right">
+                        <el-tooltip placement="right" :persistent="false" transition="" :hide-after="0">
                             <template #content>
                                 <code>{{ currentTaskRun.name }}</code>
                                 <span v-if="currentTaskRun.task && currentTaskRun.task.value"><br>{{ currentTaskRun.task.value }}</span>
@@ -24,7 +24,7 @@
                         </el-tooltip>
                     </th>
                     <td :colspan="dates.length">
-                        <el-tooltip placement="left">
+                        <el-tooltip placement="top" :persistent="false" transition="" :hide-after="0">
                             <template #content>
                                 <span style="white-space: pre-wrap;">
                                     {{ currentTaskRun.tooltip }}
@@ -60,7 +60,7 @@
                 </tr>
             </tbody>
         </table>
-    </div>
+    </el-card>
 </template>
 <script>
     import LogList from "../logs/LogList";
@@ -275,71 +275,86 @@
     };
 </script>
 <style lang="scss" scoped>
-@import "../../styles/_variable.scss";
-
-table {
-    table-layout: fixed;
+    .el-card {
+        :deep(.el-card__body) {
+            padding: 0;
+        }
 
-    & th, td {
-        border-color: var(--table-border-color);
     }
 
-    thead th, thead td {
-        text-align: right;
-    }
+    table {
+        table-layout: fixed;
+        width: 100%;
+        color: var(--bs-body-color);
 
-    tbody {
-        border-top: 0;
-    }
+        & th, td {
+            border-bottom: 1px solid var(--bs-border-color);
+            padding: 0.3rem;
+        }
 
-    thead {
-        font-size: $font-size-sm;
+        tr:last-child th, tr:last-child td {
+            border-bottom: 0;
+        }
 
-        th {
-            width: 150px;
+        thead th, thead td {
+            text-align: right;
         }
-    }
-    th {
-        max-width: 150px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
 
-    tbody {
-        th {
-            code {
-                font-weight: normal;
+        thead {
+            font-size: var(--font-size-sm);
+            background-color: var(--bs-gray-200);
+
+            th {
+                width: 150px;
+                background-color: var(--bs-gray-100-darken-5);
             }
         }
+        th {
+            max-width: 150px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        code {
+            font-size: 0.7rem;
+        }
 
-        td {
-            position: relative;
+        tbody {
+            th {
+                code {
+                    font-weight: normal;
+                }
+            }
 
-            .task-progress {
-                position: absolute;
-                transition: all 0.3s;
-                min-width: 5px;
+            td {
+                position: relative;
 
-                .progress {
-                    height: 21px;
-                    border-radius: 2px;
+                .task-progress {
                     position: relative;
-                    cursor: pointer;
+                    transition: all 0.3s;
+                    min-width: 5px;
 
-                    .progress-bar {
-                        position: absolute;
+                    .progress {
                         height: 21px;
-                        transition: none;
+                        border-radius: var(--bs-border-radius-sm);
+                        position: relative;
+                        cursor: pointer;
+                        background-color: var(--bs-gray-200);
+
+                        .progress-bar {
+                            position: absolute;
+                            height: 21px;
+                            transition: none;
+                        }
                     }
                 }
             }
         }
     }
-}
 
-:deep(.log-wrapper .attempt-wrapper) {
-    margin-bottom: 0;
-}
+    :deep(.log-wrapper .attempt-wrapper) {
+        margin-bottom: 0;
+    }
 
 </style>
diff --git a/ui/src/components/executions/Kill.vue b/ui/src/components/executions/Kill.vue
index ce65ae4a420..0f50a4eaa3b 100644
--- a/ui/src/components/executions/Kill.vue
+++ b/ui/src/components/executions/Kill.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="wrapper" v-if="enabled">
-        <el-button @click="kill" type="warning" class="mr-1">
+        <el-button @click="kill" type="warning" class="me-1">
             <stop-circle-outline />
             {{ $t("kill") }}
         </el-button>
diff --git a/ui/src/components/executions/Logs.vue b/ui/src/components/executions/Logs.vue
index ecfb96c681f..c85a9bf3cbe 100644
--- a/ui/src/components/executions/Logs.vue
+++ b/ui/src/components/executions/Logs.vue
@@ -3,8 +3,8 @@
         <collapse>
             <el-form-item>
                 <el-input
-                    v-model="filter"
-                    @input="onChange"
+                    :model-value="filter"
+                    @update:model-value="onChange"
                     :placeholder="$t('search')"
                 >
                     <template #suffix>
@@ -14,8 +14,8 @@
             </el-form-item>
             <el-form-item>
                 <log-level-selector
-                    v-model="level"
-                    @input="onChange"
+                    :value="level"
+                    @update:model-value="onChange"
                 />
             </el-form-item>
             <el-form-item>
@@ -37,6 +37,7 @@
         <log-list :level="level" :exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']" :filter="filter" />
     </div>
 </template>
+
 <script>
     import LogList from "../logs/LogList";
     import {mapState} from "vuex";
@@ -60,10 +61,14 @@
         data() {
             return {
                 fullscreen: false,
-                level: (this.$route.query.level || "INFO"),
-                filter: (this.$route.query.q || undefined)
+                level: undefined,
+                filter: undefined
             };
         },
+        created() {
+            this.level = (this.$route.query.level || "INFO");
+            this.filter = (this.$route.query.q || undefined);
+        },
         computed: {
             ...mapState("execution", ["execution", "taskRun", "logs"]),
             downloadContent() {
diff --git a/ui/src/components/executions/Metrics.vue b/ui/src/components/executions/Metrics.vue
index add747bcd55..a152437453a 100644
--- a/ui/src/components/executions/Metrics.vue
+++ b/ui/src/components/executions/Metrics.vue
@@ -1,6 +1,6 @@
 <template>
     <el-dropdown-item
-        :icon="icon.ChartAreaspline"
+        :icon="ChartAreaspline"
         :disabled="!(metrics && metrics.length > 0)"
         @click="isOpen = !isOpen"
     >
@@ -13,7 +13,7 @@
         :title="$t('metrics')"
         destroy-on-close
         :append-to-body="true"
-        size="50%"
+        size=""
         direction="ltr"
     >
         <el-table
@@ -41,7 +41,7 @@
                     <el-tag
                         v-for="(value, key) in scope.row.tags"
                         :key="key"
-                        class="mr-1"
+                        class="me-1"
                         type="info"
                         size="small"
                         disable-transitions
@@ -65,12 +65,14 @@
     </el-drawer>
 </template>
 
+<script setup>
+    import ChartAreaspline from "vue-material-design-icons/ChartAreaspline.vue";
+</script>
+
 <script>
-    import {shallowRef} from "vue";
     import Kicon from "../Kicon";
     import Timer from "vue-material-design-icons/Timer";
     import Counter from "vue-material-design-icons/Numeric";
-    import ChartAreaspline from "vue-material-design-icons/ChartAreaspline.vue";
 
     export default {
         components: {
@@ -81,13 +83,12 @@
         props: {
             metrics: {
                 type: Array,
-                required: true
+                default: undefined
             }
         },
         data() {
             return {
                 isOpen: false,
-                icon: {ChartAreaspline: shallowRef(ChartAreaspline)}
             };
         },
     };
diff --git a/ui/src/components/executions/Outputs.vue b/ui/src/components/executions/Outputs.vue
index 7e8b5297bde..c42b6a1f4d7 100644
--- a/ui/src/components/executions/Outputs.vue
+++ b/ui/src/components/executions/Outputs.vue
@@ -1,6 +1,6 @@
 <template>
     <el-dropdown-item
-        :icon="icon.LocationExit"
+        :icon="LocationExit"
         :disabled="!outputs || outputs.length === 0"
         @click="isOpen = !isOpen"
     >
@@ -13,7 +13,7 @@
         :title="$t('outputs')"
         destroy-on-close
         :append-to-body="true"
-        size="50%"
+        size=""
         direction="ltr"
     >
         <vars
@@ -25,17 +25,17 @@
     </el-drawer>
 </template>
 
+<script setup>
+    import LocationExit from "vue-material-design-icons/LocationExit.vue";
+</script>
+
 <script>
-    import {shallowRef} from "vue";
-    import Kicon from "../Kicon";
     import Vars from "../executions/Vars";
     import Timer from "vue-material-design-icons/Timer";
     import Counter from "vue-material-design-icons/Numeric";
-    import LocationExit from "vue-material-design-icons/LocationExit.vue";
 
     export default {
         components: {
-            Kicon,
             Timer,
             Counter,
             Vars,
@@ -53,7 +53,6 @@
         data() {
             return {
                 isOpen: false,
-                icon: {LocationExit: shallowRef(LocationExit)}
             };
         },
     };
diff --git a/ui/src/components/executions/Overview.vue b/ui/src/components/executions/Overview.vue
index 3f9a96feac5..ef364520ad6 100644
--- a/ui/src/components/executions/Overview.vue
+++ b/ui/src/components/executions/Overview.vue
@@ -4,7 +4,7 @@
             <el-col :span="12" class="crud-align">
                 <crud type="CREATE" permission="EXECUTION" :detail="{executionId: execution.id}" />
             </el-col>
-            <el-col :span="12" class="text-right">
+            <el-col :span="12" class="text-end">
                 <restart :execution="execution" @follow="forwardEvent('follow', $event)" />
                 <kill :execution="execution" />
                 <status :status="execution.state.current" />
diff --git a/ui/src/components/executions/Restart.vue b/ui/src/components/executions/Restart.vue
index d0da37b3529..32f4a074ca4 100644
--- a/ui/src/components/executions/Restart.vue
+++ b/ui/src/components/executions/Restart.vue
@@ -1,11 +1,11 @@
 <template>
     <component
         :is="component"
-        :icon="!isReplay ? icon.RestartIcon : icon.PlayBoxMultiple"
+        :icon="!isReplay ? RestartIcon : PlayBoxMultiple"
         @click="isOpen = !isOpen"
         v-if="isReplay || enabled"
         :disabled="!enabled"
-        :class="!isReplay ? 'btn-info restart mr-1' : ''"
+        :class="!isReplay ? 'restart me-1' : ''"
     >
         {{ $t(replayOrRestart) }}
     </component>
@@ -48,15 +48,19 @@
         </el-form>
     </el-dialog>
 </template>
-<script>
+
+<script setup>
     import RestartIcon from "vue-material-design-icons/Restart";
     import PlayBoxMultiple from "vue-material-design-icons/PlayBoxMultiple";
+</script>
+
+<script>
+
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import State from "../../utils/state";
     import ExecutionUtils from "../../utils/executionUtils";
-    import {shallowRef} from "vue";
 
     export default {
         components: {RestartIcon, PlayBoxMultiple},
@@ -168,7 +172,6 @@
             return {
                 revisionsSelected: undefined,
                 isOpen: false,
-                icon: {RestartIcon: shallowRef(RestartIcon), PlayBoxMultiple: shallowRef(PlayBoxMultiple)}
             };
         },
     };
diff --git a/ui/src/components/executions/VarValue.vue b/ui/src/components/executions/VarValue.vue
index 83fef9210c5..f68165d5bf4 100644
--- a/ui/src/components/executions/VarValue.vue
+++ b/ui/src/components/executions/VarValue.vue
@@ -1,30 +1,27 @@
 <template>
     <el-link
         v-if="isFile(value)"
+        :icon="Download"
         target="_blank"
         :href="itemUrl(value)"
     >
-        <kicon placement="left">
-            <download /> {{ $t('download') }}
-            <span v-if="humanSize">({{ humanSize }})</span>
-        </kicon>
+        {{ $t('download') }}
+        <span v-if="humanSize">({{ humanSize }})</span>
     </el-link>
     <span v-else>
         {{ value }}
     </span>
 </template>
 
+<script setup>
+    import Download from "vue-material-design-icons/Download";
+</script>
+
 <script>
     import {apiRoot} from "../../utils/http";
-    import Download from "vue-material-design-icons/Download";
-    import Kicon from "../Kicon"
     import Utils from "../../utils/utils";
 
     export default {
-        components: {
-            Download,
-            Kicon
-        },
         data () {
             return {
                 humanSize: ""
diff --git a/ui/src/components/executions/Vars.vue b/ui/src/components/executions/Vars.vue
index a5c94e848fb..2ddfba5fe4d 100644
--- a/ui/src/components/executions/Vars.vue
+++ b/ui/src/components/executions/Vars.vue
@@ -14,10 +14,7 @@
                 </template>
                 <template v-else-if="scope.row.subflow">
                     {{ scope.row.value }}
-                    <sub-flow-link
-                        class="btn-xs"
-                        :execution-id="scope.row.value"
-                    />
+                    <sub-flow-link :execution-id="scope.row.value" />
                 </template>
                 <template v-else>
                     <var-value :execution="execution" :value="scope.row.value" />
diff --git a/ui/src/components/flows/FlowEdit.vue b/ui/src/components/flows/FlowEdit.vue
index 5cd7e01ceda..67fb1b2bd83 100644
--- a/ui/src/components/flows/FlowEdit.vue
+++ b/ui/src/components/flows/FlowEdit.vue
@@ -4,21 +4,15 @@
         <bottom-line v-if="canSave || canDelete || canExecute">
             <ul>
                 <li>
-                    <kicon>
-                        <el-button type="danger" v-if="canDelete" @click="deleteFile">
-                            <delete />
-                            <span>{{ $t('delete') }}</span>
-                        </el-button>
-                    </kicon>
+                    <el-button :icon="Delete" type="danger" v-if="canDelete" @click="deleteFile">
+                        {{ $t('delete') }}
+                    </el-button>
                 </li>
 
                 <li>
                     <router-link v-if="flow" :to="{name: 'flows/create', query: {copy: true}}">
-                        <el-button>
-                            <kicon>
-                                <content-copy />
-                                {{ $t('copy') }}
-                            </kicon>
+                        <el-button :icon="ContentCopy">
+                            {{ $t('copy') }}
                         </el-button>
                     </router-link>
                 </li>
@@ -27,13 +21,9 @@
                     <trigger-flow v-if="flow && canExecute" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
                 </li>
 
-
                 <li>
-                    <el-button @click="save" v-if="canSave" type="primary">
-                        <kicon>
-                            <content-save />
-                            <span>{{ $t('save') }}</span>
-                        </kicon>
+                    <el-button :icon="ContentSave" @click="save" v-if="canSave" type="primary">
+                        {{ $t('save') }}
                     </el-button>
                 </li>
             </ul>
@@ -41,19 +31,21 @@
     </div>
 </template>
 
+<script setup>
+    import ContentCopy from "vue-material-design-icons/ContentCopy";
+    import ContentSave from "vue-material-design-icons/ContentSave";
+    import Delete from "vue-material-design-icons/Delete";
+</script>
+
 <script>
     import flowTemplateEdit from "../../mixins/flowTemplateEdit";
     import unsavedChange from "../../mixins/unsavedChange";
     import {mapGetters} from "vuex";
     import TriggerFlow from "./TriggerFlow"
-    import Kicon from "../Kicon"
-    import ContentCopy from "vue-material-design-icons/ContentCopy";
 
     export default {
         components: {
             TriggerFlow,
-            Kicon,
-            ContentCopy,
         },
         mixins: [flowTemplateEdit],
         data() {
diff --git a/ui/src/components/flows/FlowRevisions.vue b/ui/src/components/flows/FlowRevisions.vue
index 863c4f632d0..6f3ccd1dd3a 100644
--- a/ui/src/components/flows/FlowRevisions.vue
+++ b/ui/src/components/flows/FlowRevisions.vue
@@ -20,10 +20,10 @@
                         />
                     </el-select>
                     <el-button-group>
-                        <el-button  :icon="icon.FileCode" @click="seeRevision(revisionLeft, revisionLeftText)">
+                        <el-button  :icon="FileCode" @click="seeRevision(revisionLeft, revisionLeftText)">
                             <span class="d-none d-lg-inline-block">&nbsp;{{ $t('see full revision') }}</span>
                         </el-button>
-                        <el-button :icon="icon.Restore" :disabled="revisionNumber(revisionLeft) === flow.revision" @click="restoreRevision(revisionLeft, revisionLeftText)">
+                        <el-button :icon="Restore" :disabled="revisionNumber(revisionLeft) === flow.revision" @click="restoreRevision(revisionLeft, revisionLeftText)">
                             <span class="d-none d-lg-inline-block">&nbsp;{{ $t('restore') }}</span>
                         </el-button>
                     </el-button-group>
@@ -47,10 +47,10 @@
                         />
                     </el-select>
                     <el-button-group>
-                        <el-button  :icon="icon.FileCode" @click="seeRevision(revisionRight, revisionRightText)">
+                        <el-button  :icon="FileCode" @click="seeRevision(revisionRight, revisionRightText)">
                             <span class="d-none d-lg-inline-block">&nbsp;{{ $t('see full revision') }}</span>
                         </el-button>
-                        <el-button :icon="icon.Restore" :disabled="revisionNumber(revisionRight) === flow.revision" @click="restoreRevision(revisionRight, revisionRightText)">
+                        <el-button :icon="Restore" :disabled="revisionNumber(revisionRight) === flow.revision" @click="restoreRevision(revisionRight, revisionRightText)">
                             <span class="d-none d-lg-inline-block">&nbsp;{{ $t('restore') }}</span>
                         </el-button>
                     </el-button-group>
@@ -75,7 +75,7 @@
         </div>
 
 
-        <el-drawer v-if="isModalOpen" v-model="isModalOpen" destroy-on-close :append-to-body="true">
+        <el-drawer v-if="isModalOpen" v-model="isModalOpen" destroy-on-close :append-to-body="true" size="">
             <template #header>
                 <h5>{{ $t("revision") + `: ` + revision }}</h5>
             </template>
@@ -90,20 +90,21 @@
         </el-alert>
     </div>
 </template>
+
+<script setup>
+    import FileCode from "vue-material-design-icons/FileCode";
+    import Restore from "vue-material-design-icons/Restore";
+</script>
+
 <script>
     import {mapState} from "vuex";
     import YamlUtils from "../../utils/yamlUtils";
     import Editor from "../../components/inputs/Editor";
-    import FileCode from "vue-material-design-icons/FileCode";
-    import Restore from "vue-material-design-icons/Restore";
-    import Kicon from "../Kicon"
     import Crud from "override/components/auth/Crud";
     import {saveFlowTemplate} from "../../utils/flowTemplate";
-    import {shallowRef} from "vue";
-    import Trigger from "vue-material-design-icons/Cogs.vue";
 
     export default {
-        components: {Editor, FileCode, Restore, Kicon, Crud},
+        components: {Editor, Crud},
         created() {
             this.load();
         },
@@ -229,7 +230,6 @@
                     {value: true, text: this.$t("side-by-side")},
                     {value: false, text:  this.$t("line-by-line")},
                 ],
-                icon: {FileCode: shallowRef(FileCode), Restore: shallowRef(Restore)},
                 isModalOpen: false
             };
         },
diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
index 124001e7b5b..38abd0c67a7 100644
--- a/ui/src/components/flows/FlowRoot.vue
+++ b/ui/src/components/flows/FlowRoot.vue
@@ -3,8 +3,8 @@
         <div v-if="ready">
             <tabs route-name="flows/update" ref="currentTab" :tabs="tabs" @hook:mounted="mounted = true" />
             <bottom-line v-if="mounted && displayBottomLine()">
-                <ul class="navbar-nav ml-auto">
-                    <li class="nav-item">
+                <ul>
+                    <li>
                         <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
                     </li>
                 </ul>
diff --git a/ui/src/components/flows/FlowRun.vue b/ui/src/components/flows/FlowRun.vue
index 1377489a7cd..7b61ebb914f 100644
--- a/ui/src/components/flows/FlowRun.vue
+++ b/ui/src/components/flows/FlowRun.vue
@@ -85,22 +85,24 @@
 
                 <small v-if="input.description" class="form-text text-muted">{{ input.description }}</small>
             </el-form-item>
-            <el-form-item class="mb-0">
-                <el-button :icon="icon.Trigger" @click="onSubmit" type="primary" :disabled="flow.disabled">
+            <el-form-item class="mb-0 submit">
+                <el-button :icon="Flash" @click="onSubmit" type="primary" :disabled="flow.disabled">
                     {{ $t('launch execution') }}
                 </el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
+
+<script setup>
+    import Flash from "vue-material-design-icons/Flash";
+</script>
+
 <script>
-    import {shallowRef} from "vue";
     import {mapState} from "vuex";
-    import Trigger from "vue-material-design-icons/Cogs";
     import {executeTask} from "../../utils/submitTask"
 
     export default {
-        components: {Trigger},
         props: {
             redirect: {
                 type: Boolean,
@@ -108,9 +110,6 @@
             }
         },
         emits: ["executionTrigger"],
-        data() {
-            return {icon: {Trigger: shallowRef(Trigger)}};
-        },
         mounted() {
             setTimeout(() => {
                 const input = this.$el && this.$el.querySelector && this.$el.querySelector("input")
diff --git a/ui/src/components/flows/FlowSource.vue b/ui/src/components/flows/FlowSource.vue
index d8debf71e32..21f4e7957b3 100644
--- a/ui/src/components/flows/FlowSource.vue
+++ b/ui/src/components/flows/FlowSource.vue
@@ -1,6 +1,7 @@
 <template>
     <flow-edit v-if="flow" :prevent-route-info="true" />
 </template>
+
 <script>
     import {mapGetters} from "vuex";
     import FlowEdit from "override/components/flows/FlowEdit";
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 8220d7fc317..1d3a06dddb2 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -103,39 +103,36 @@
         <bottom-line v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
             <ul>
                 <li>
-                    <kicon>
-                        <router-link :to="{name: 'flows/search'}">
-                            <el-button>
-                                <text-box-search />
-                                {{ $t('source search') }}
-                            </el-button>
-                        </router-link>
-                    </kicon>
+                    <router-link :to="{name: 'flows/search'}">
+                        <el-button :icon="TextBoxSearch">
+                            {{ $t('source search') }}
+                        </el-button>
+                    </router-link>
                 </li>
 
                 <li>
-                    <kicon>
-                        <router-link :to="{name: 'flows/create'}">
-                            <el-button type="primary">
-                                <plus />
-                                {{ $t('create') }}
-                            </el-button>
-                        </router-link>
-                    </kicon>
+                    <router-link :to="{name: 'flows/create'}">
+                        <el-button :icon="Plus" type="primary">
+                            {{ $t('create') }}
+                        </el-button>
+                    </router-link>
                 </li>
             </ul>
         </bottom-line>
     </div>
 </template>
 
+<script setup>
+    import Plus from "vue-material-design-icons/Plus";
+    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch";
+</script>
+
 <script>
     import {mapState} from "vuex";
     import _merge from "lodash/merge";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import NamespaceSelect from "../namespace/NamespaceSelect";
-    import Plus from "vue-material-design-icons/Plus";
-    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch";
     import Eye from "vue-material-design-icons/Eye";
     import BottomLine from "../layout/BottomLine";
     import RouteContext from "../../mixins/routeContext";
@@ -155,8 +152,6 @@
         components: {
             NamespaceSelect,
             BottomLine,
-            Plus,
-            TextBoxSearch,
             Eye,
             DataTable,
             SearchField,
@@ -165,7 +160,7 @@
             TriggerAvatar,
             MarkdownTooltip,
             Kicon,
-            Labels
+            Labels,
         },
         data() {
             return {
diff --git a/ui/src/components/flows/FlowsSearch.vue b/ui/src/components/flows/FlowsSearch.vue
index eba652d71d9..c0265ebde9b 100644
--- a/ui/src/components/flows/FlowsSearch.vue
+++ b/ui/src/components/flows/FlowsSearch.vue
@@ -24,7 +24,7 @@
 
                 <template #table>
                     <div v-if="search === undefined || search.length === 0">
-                        <el-alert type="info" class="text-muted" show-icon :closable="false">
+                        <el-alert type="info" class="mb-3" show-icon :closable="false">
                             {{ $t('no result') }}
                         </el-alert>
                     </div>
diff --git a/ui/src/components/flows/Schedule.vue b/ui/src/components/flows/Schedule.vue
index 1d00192510c..1baa85e554e 100644
--- a/ui/src/components/flows/Schedule.vue
+++ b/ui/src/components/flows/Schedule.vue
@@ -10,12 +10,12 @@
                 :key="x"
             />
         </el-collapse>
-        <el-alert show-icon type="info" v-else :closable="false" class="text-muted mb-0">
+        <el-alert show-icon type="info" v-else :closable="false" class="mb-0">
             {{ $t('no result') }}
         </el-alert>
         <bottom-line v-if="canSave">
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item">
+            <ul>
+                <li>
                     <el-button
                         @click="addSchedule"
                         v-if="canSave"
diff --git a/ui/src/components/flows/ScheduleItem.vue b/ui/src/components/flows/ScheduleItem.vue
index c5952102617..e504a7f4479 100644
--- a/ui/src/components/flows/ScheduleItem.vue
+++ b/ui/src/components/flows/ScheduleItem.vue
@@ -1,7 +1,7 @@
 <template>
     <el-collapse-item :name="schedule.id">
         <template #title>
-            {{ schedule.id }} <el-tag class="ml-2" disable-transitions type="info">{{ schedule.cron }}</el-tag>
+            {{ schedule.id }} <el-tag class="ms-2" disable-transitions type="info">{{ schedule.cron }}</el-tag>
         </template>
         <el-form class="ks-horizontal">
             <el-form-item :label="$t('id')">
@@ -12,7 +12,7 @@
                 <template #label>
                     {{ $t('schedules.cron.expression') }}
 
-                    <el-tooltip :target="'tooltip-' + index" placement="bottom">
+                    <el-tooltip :target="'tooltip-' + index" placement="bottom" :persistent="false">
                         <template #content>
                             <div v-if="isValid">
                                 <p class="font-weight-bold">
@@ -51,7 +51,7 @@
                 />
             </el-form-item>
 
-            <el-form-item class="text-right" label="&nbsp;">
+            <el-form-item class="text-end" label="&nbsp;">
                 <el-button type="danger" @click="remove">
                     <delete />
                     Delete
@@ -118,7 +118,7 @@
             />
         </b-form-group>
 
-        <b-form-group class="mb-0 text-right">
+        <b-form-group class="mb-0 text-end">
             <el-btn type="danger" @click="remove">
                 <delete />
                 Delete
diff --git a/ui/src/components/flows/SubFlowLink.vue b/ui/src/components/flows/SubFlowLink.vue
index d812a0f513b..a9ed14ad930 100644
--- a/ui/src/components/flows/SubFlowLink.vue
+++ b/ui/src/components/flows/SubFlowLink.vue
@@ -1,16 +1,15 @@
 <template>
-    <component :icon="icon.AxisYArrow" :is="component" @click="click" class="node-action">
+    <component :icon="AxisYArrow" :is="component" @click="click" class="node-action" size="small" type="primary">
         <span v-if="component !== 'el-button'">{{ $t('sub flow') }}</span>
     </component>
 </template>
-<script>
+
+<script setup>
     import AxisYArrow from "vue-material-design-icons/AxisYArrow";
-    import {shallowRef} from "vue";
+</script>
 
+<script>
     export default {
-        components: {
-            AxisYArrow
-        },
         props: {
             component: {
                 type: String,
@@ -37,9 +36,6 @@
                 default: "topology"
             }
         },
-        data() {
-            return {icon: {AxisYArrow: shallowRef(AxisYArrow)}};
-        },
         methods: {
             click() {
                 if (this.executionId && this.namespace && this.flowId) {
diff --git a/ui/src/components/flows/TriggerAvatar.vue b/ui/src/components/flows/TriggerAvatar.vue
index d0fec851dd7..4a89c9e28c4 100644
--- a/ui/src/components/flows/TriggerAvatar.vue
+++ b/ui/src/components/flows/TriggerAvatar.vue
@@ -4,15 +4,14 @@
             <template v-if="trigger.disabled === undefined || trigger.disabled === false">
                 <el-popover
                     placement="left"
+                    :persistent="false"
                     :title="`${$t('trigger details')}: ${trigger ? trigger.id : ''}`"
+                    width=""
+                    transition=""
+                    :hide-after="0"
                 >
                     <template #reference>
-                        <el-avatar
-                            class="mr-1"
-                            size="small"
-                            variant="primary"
-                            button
-                        >
+                        <el-avatar class="me-1" size="small" button>
                             {{ name(trigger) }}
                         </el-avatar>
                     </template>
@@ -73,13 +72,3 @@
         }
     };
 </script>
-
-<style lang="scss" scoped>
-@use "sass:math";
-@import "../../styles/_variable.scss";
-
-.b-avatar {
-    margin-right: 5px;
-}
-
-</style>
diff --git a/ui/src/components/flows/TriggerFlow.vue b/ui/src/components/flows/TriggerFlow.vue
index 0967ff1fcc2..0d2de4e448c 100644
--- a/ui/src/components/flows/TriggerFlow.vue
+++ b/ui/src/components/flows/TriggerFlow.vue
@@ -1,27 +1,26 @@
 <template>
     <div class="trigger-flow-wrapper">
-        <el-button :disabled="disabled" @click="onClick">
-            <kicon>
-                <flash /> {{ $t('New execution') }}
-            </kicon>
+        <el-button :icon="Flash" :disabled="disabled" @click="onClick">
+           {{ $t('New execution') }}
         </el-button>
         <el-dialog v-if="isOpen" v-model="isOpen" :title="$t('execute the flow')" destroy-on-close :append-to-body="true">
             <flow-run @execution-trigger="closeModal" :redirect="true" />
         </el-dialog>
     </div>
 </template>
-<script>
+
+<script setup>
     import Flash from "vue-material-design-icons/Flash";
+</script>
+
+<script>
     import FlowRun from "./FlowRun";
     import {mapState} from "vuex";
     import {executeTask} from "../../utils/submitTask"
-    import Kicon from "../Kicon"
 
     export default {
         components: {
-            Flash,
             FlowRun,
-            Kicon
         },
         props: {
             flowId: {
@@ -77,6 +76,7 @@
         }
     };
 </script>
+
 <style scoped>
 .trigger-flow-wrapper {
     display: inline;
diff --git a/ui/src/components/graph/TopologyTree.vue b/ui/src/components/graph/TopologyTree.vue
index 070516dd4a8..37de9ff5977 100644
--- a/ui/src/components/graph/TopologyTree.vue
+++ b/ui/src/components/graph/TopologyTree.vue
@@ -1,8 +1,8 @@
 <template>
-    <div>
+    <el-card shadow="never">
         <cytoscape ref="cytoscape">
             <template #btn>
-                <el-tooltip :content="$t('topology-graph.graph-orientation')">
+                <el-tooltip :content="$t('topology-graph.graph-orientation')" :persistent="false" transition="" :hide-after="0">
                     <el-button :icon="orientation ? icon.ArrowCollapseDown : icon.ArrowCollapseRight" size="small" @click="toggleOrientation" />
                 </el-tooltip>
             </template>
@@ -19,7 +19,7 @@
                 />
             </teleport>
         </div>
-    </div>
+    </el-card>
 </template>
 
 <script>
diff --git a/ui/src/components/graph/TreeNode.vue b/ui/src/components/graph/TreeNode.vue
index 1de262606ac..4eb2adafc42 100644
--- a/ui/src/components/graph/TreeNode.vue
+++ b/ui/src/components/graph/TreeNode.vue
@@ -18,7 +18,7 @@
                     <el-tag
                         v-if="this.execution"
                         type="info"
-                        class="mr-1"
+                        class="me-1"
                         size="small"
                         round
                         disable-transitions
@@ -47,7 +47,7 @@
                     />
 
 
-                    <el-tooltip v-if="this.execution" :content="$t('show task logs')">
+                    <el-tooltip v-if="this.execution" :content="$t('show task logs')" :persistent="false" transition="" :hide-after="0">
                         <el-button
                             class="node-action"
                             :disabled="this.taskRuns.length === 0"
@@ -76,14 +76,15 @@
             v-model="isOpen"
             :title="`Task ${task.id}`"
             destroy-on-close
+            size=""
             :append-to-body="true"
         >
             <collapse>
                 <el-form-item>
-                    <search-field :router="false" @search="onSearch" class="mr-2" />
+                    <search-field :router="false" @search="onSearch" class="me-2" />
                 </el-form-item>
                 <el-form-item>
-                    <log-level-selector :log-level="logLevel" @input="onLevelChange" />
+                    <log-level-selector :value="logLevel" @update:model-value="onLevelChange" />
                 </el-form-item>
             </collapse>
 
@@ -236,130 +237,123 @@
     };
 </script>
 <style scoped lang="scss">
-@import "../../styles/_variable.scss";
+    .node-wrapper {
+        cursor: pointer;
+        display: flex;
+        width: 200px;
+        background: var(--bs-gray-100);
 
-.node-wrapper {
-    cursor: pointer;
-    display: flex;
-    width: 200px;
-    background: var(--gray-100);
+        .el-button, .card-header {
+            border-radius: 0 !important;
+        }
 
-    .el-button, .card-header {
-        border-radius: 0 !important;
-    }
+        &.task-disabled {
+            .card-header .task-title {
+                text-decoration: line-through;
+            }
+        }
 
-    &.task-disabled {
-        .card-header .task-title {
-            text-decoration: line-through;
+        > .icon {
+            width: 35px;
+            height: 53px;
+            background: var(--white);
+            border-right: 1px solid var(--bs-border-color);
+            position: relative;
         }
-    }
 
-    > .icon {
-        width: 35px;
-        height: 51px;
-        background: var(--white);
-        border-right: 1px solid var(--table-border-color);
-        position: relative;
-    }
+        .status-color {
+            width: 10px;
+            height: 53px;
+            border-right: 1px solid var(--bs-border-color);
+        }
 
-    .status-color {
-        width: 10px;
-        height: 51px;
-        border-right: 1px solid var(--table-border-color);
-    }
+        .is-success {
+            background-color: var(--green);
+        }
 
-    .is-success {
-        background-color: var(--green);
-    }
+        .is-running {
+            background-color: var(--blue);
+        }
 
-    .is-running {
-        background-color: var(--blue);
-    }
+        .is-failed {
+            background-color: var(--red);
+        }
 
-    .is-failed {
-        background-color: var(--red);
-    }
+        .bg-undefined {
+            background-color: var(--bs-gray-400);
+        }
 
-    .bg-undefined {
-        background-color: var(--gray-400);
-    }
+        .task-content {
+            flex-grow: 1;
+            width: 38px;
+
+            .card-header {
+                height: 25px;
+                padding: 2px;
+                margin: 0;
+                border-bottom: 1px solid var(--bs-border-color);
+                flex: 1;
+                flex-wrap: nowrap;
+                background-color: var(--bs-gray-200);
+                color: var(--bs-body-color);
+
+                html.dark & {
+                    background-color: var(--bs-gray-300);
+                }
 
-    .task-content {
-        flex-grow: 1;
-        width: 38px;
-
-        .card-header {
-            height: 25px;
-            padding: 2px;
-            margin: 0;
-            border-bottom: 1px solid var(--table-border-color);
-            flex: 1;
-            flex-wrap: nowrap;
-
-            background-color: var(--gray-200);
-            .theme-dark & {
-                background-color: var(--gray-300);
-            }
+                .icon-wrapper {
+                    display: inline-block;
+                    flex-shrink: 2;
+                }
 
-            .icon-wrapper {
-                display: inline-block;
-                flex-shrink: 2;
-            }
+                .task-title {
+                    margin-left: 2px;
+                    display: inline-block;
+                    font-size: var(--font-size-sm);
+                    flex-grow: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 100%;
+                    white-space: nowrap;
+                }
 
-            .task-title {
-                margin-left: 2px;
-                display: inline-block;
-                font-size: $font-size-sm;
-                flex-grow: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 100%;
-                white-space: nowrap;
+                :deep(.node-action) {
+                    flex-shrink: 2;
+                    padding-top: 18px;
+                    padding-right: 18px;
+                }
             }
 
-            :deep(.node-action) {
-                flex-shrink: 2;
-                padding-top: 18px;
-                padding-right: 18px;
+            .status-wrapper {
+                margin: 10px;
             }
         }
 
-        .status-wrapper {
-            margin: 10px;
+        .card-wrapper {
+            top: 50px;
+            position: absolute;
         }
-    }
 
-    .card-wrapper {
-        top: 50px;
-        position: absolute;
-    }
-
-    .info-wrapper {
-        display: flex;
-        .bottom {
-            padding: 4px 4px;
-            color: $text-muted;
-            font-size: $font-size-xs;
-            flex-grow: 2;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            position: relative;
-
-            .badge {
-                padding-bottom: $badge-padding-y;
-                font-weight: bold;
-                font-size: 100%;
-                top: -4px;
+        .info-wrapper {
+            display: flex;
+            .bottom {
+                padding: 4px 4px;
+                color: var(--bs-body-color);
+                opacity: 0.7;
+                font-size: var(--font-size-xs);
+                flex-grow: 2;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                position: relative;
             }
         }
-    }
 
-    .node-action {
-        height: 26px;
-        padding-top: 1px;
-        padding-right: 5px;
-        padding-left: 5px;
+        .node-action {
+            height: 28px;
+            padding-top: 1px;
+            padding-right: 5px;
+            padding-left: 5px;
+        }
     }
-}
 </style>
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index 997bd958fa5..511054a1fbb 100644
--- a/ui/src/components/inputs/Editor.vue
+++ b/ui/src/components/inputs/Editor.vue
@@ -2,11 +2,11 @@
     <div>
         <nav v-if="original === undefined && navbar" class="top-nav">
             <el-button-group>
-                <el-tooltip :content="$t('Fold content lines')">
-                    <el-button :icon="icon.UnfoldLessHorizontal" @click="autoFold(true)" size="small" type="info" />
+                <el-tooltip :content="$t('Fold content lines')" :persistent="false" transition="" :hide-after="0">
+                    <el-button :icon="icon.UnfoldLessHorizontal" @click="autoFold(true)" size="small" />
                 </el-tooltip>
-                <el-tooltip :content="$t('Unfold content lines')">
-                    <el-button :icon="icon.UnfoldMoreHorizontal" @click="unfoldAll" size="small" type="info" />
+                <el-tooltip :content="$t('Unfold content lines')" :persistent="false" transition="" :hide-after="0">
+                    <el-button :icon="icon.UnfoldMoreHorizontal" @click="unfoldAll" size="small" />
                 </el-tooltip>
             </el-button-group>
         </nav>
@@ -39,10 +39,9 @@
 </template>
 
 <script>
-import {defineAsyncComponent, shallowRef} from "vue"
+    import {defineAsyncComponent, shallowRef} from "vue"
     import UnfoldLessHorizontal from "vue-material-design-icons/UnfoldLessHorizontal";
     import UnfoldMoreHorizontal from "vue-material-design-icons/UnfoldMoreHorizontal";
-    import * as monaco from 'monaco-editor'
 
     const MonacoEditor = defineAsyncComponent(() =>
         import('./MonacoEditor')
@@ -297,62 +296,73 @@ import {defineAsyncComponent, shallowRef} from "vue"
         },
     };
 </script>
-<style scoped lang="scss">
-@use "sass:math";
-@import "../../styles/variable";
-
-:deep(.editor-container) {
-    position: relative;
-    max-width: 100%;
-    display: flex;
-
-    .placeholder {
-        position: absolute;
-        top:  $input-padding-y ;
-        left: $input-padding-x;
-        overflow: hidden;
-        padding-left: inherit;
-        padding-right: inherit;
-        cursor: text;
-        user-select: none;
-        color: $input-placeholder-color;
-    }
 
-    .editor-with-placeholder {
-        :deep(.view-lines) {
-            opacity: 0;
+<style lang="scss">
+    .top-nav {
+        background-color: var(--bs-gray-300);
+        padding: calc(var(--spacer) / 2);
+        border-radius: var(--bs-border-radius-lg);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        html.dark & {
+            background-color: var(--bs-gray-100);
         }
     }
 
-    &.single-line {
-        padding: $input-padding-y $input-padding-x;
-        background: white;
-        border: 1px solid var(--input-border-color);
-        min-height: 38px;
-
-        &.theme-vs-dark {
-            background: #1e1e1e;
+    :deep(.editor-container) {
+        position: relative;
+        max-width: 100%;
+        display: flex;
+
+        .placeholder {
+            position: absolute;
+            top:  .75rem ;
+            left: .375rem;
+            overflow: hidden;
+            padding-left: inherit;
+            padding-right: inherit;
+            cursor: text;
+            user-select: none;
+            color: var(--el-text-color-placeholder);
         }
-    }
 
-    .monaco-hover-content {
-        h4 {
-            font-size: $font-size-base;
-            font-weight: bold;
-            line-height: $line-height-base;
+        .editor-with-placeholder {
+            :deep(.view-lines) {
+                opacity: 0;
+            }
         }
 
-        p {
-            margin-bottom: math.div($spacer, 2);
-            &:last-child {
-                display: none;
+        &.single-line {
+            padding: 5px 11px ;
+            min-height: var(--el-component-size);
+            background: white;
+            border: 1px solid var(--bs-border-color);
+            border-radius: var(--el-border-radius-base);
+
+            &.theme-vs-dark {
+                background: #1e1e1e;
             }
         }
 
-        *:nth-last-child(2n) {
-            margin-bottom: 0;
+        .monaco-hover-content {
+            h4 {
+                font-size: var(--font-size-base);
+                font-weight: bold;
+                line-height: var(--bs-body-line-height);
+            }
+
+            p {
+                margin-bottom: calc(var(--spacer) / 2);
+                &:last-child {
+                    display: none;
+                }
+            }
+
+            *:nth-last-child(2n) {
+                margin-bottom: 0;
+            }
         }
     }
-}
 
 </style>
\ No newline at end of file
diff --git a/ui/src/components/layout/BottomLine.vue b/ui/src/components/layout/BottomLine.vue
index 73362b56c58..cbc1429011e 100644
--- a/ui/src/components/layout/BottomLine.vue
+++ b/ui/src/components/layout/BottomLine.vue
@@ -15,21 +15,21 @@
         right: 0;
         left: 0px;
         border-radius: 0;
-        border-top: 1px solid getCssVar('border-color');
+        border-top: 1px solid var(--bs-border-color);
         z-index: 90;
-        background-color: getCssVar('color', 'white');
+        background-color: var(--bs-white);
         padding: 0.5rem 1rem;
         text-align: right;
 
         html.dark & {
-            background-color: getCssVar('gray-200');
+            background-color: var(--bs-gray-100-darken-3);
         }
 
         button {
-            margin-left: getCssVar('spacer');
+            margin-left: var(--spacer);
 
             span:first-child {
-                margin-right: calc(getCssVar('spacer') / 3);
+                margin-right: calc(var(--spacer) / 3);
             }
         }
 
diff --git a/ui/src/components/layout/Collapse.vue b/ui/src/components/layout/Collapse.vue
index abae33be31b..5d10c57384b 100644
--- a/ui/src/components/layout/Collapse.vue
+++ b/ui/src/components/layout/Collapse.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="collapse">
+    <div class="collapse mb-sm-4 mb-md-0">
         <div class="button mb-2">
             <el-button @click="isNavbarVisible = !isNavbarVisible">
                 <Menu />
diff --git a/ui/src/components/layout/Cytoscape.vue b/ui/src/components/layout/Cytoscape.vue
index 22fe3c8f316..3b640574f06 100644
--- a/ui/src/components/layout/Cytoscape.vue
+++ b/ui/src/components/layout/Cytoscape.vue
@@ -4,46 +4,39 @@
             <div>
                 <el-button-group>
                     <slot name="btn" />
-                    <el-tooltip :content="$t('topology-graph.zoom-in')">
+                    <el-tooltip :content="$t('topology-graph.zoom-in')" :persistent="false" transition="" :hide-after="0">
                         <el-button :icon="icon.MagnifyPlus" size="small" @click="setAction('in')" />
                     </el-tooltip>
-                    <el-tooltip :content="$t('topology-graph.zoom-out')">
+                    <el-tooltip :content="$t('topology-graph.zoom-out')" :persistent="false" transition="" :hide-after="0">
                         <el-button :icon="icon.MagnifyMinus" size="small" @click="setAction('out')" />
                     </el-tooltip>
-                    <el-tooltip :content="$t('topology-graph.zoom-reset')">
+                    <el-tooltip :content="$t('topology-graph.zoom-reset')" :persistent="false" transition="" :hide-after="0">
                         <el-button :icon="icon.ArrowCollapseAll" size="small" @click="setAction('reset')" />
                     </el-tooltip>
-                    <el-tooltip :content="$t('topology-graph.zoom-fit')">
+                    <el-tooltip :content="$t('topology-graph.zoom-fit')" :persistent="false" transition="" :hide-after="0">
                         <el-button :icon="icon.FitToPage" size="small" @click="setAction('fit')" />
                     </el-tooltip>
                 </el-button-group>
             </div>
         </div>
 
-        <el-alert v-if="ready && this.count === 0" variant="info" :closable="false" class="m-0 text-muted" show-icon>
+        <el-alert v-if="ready && this.count === 0" type="info" :closable="false" class="m-0 text-muted" show-icon>
             {{ $t('no result') }}
         </el-alert>
 
         <div :class="{hide: !ready}" class="graph-wrapper" :id="uuid" ref="wrapper" />
     </div>
 </template>
+
 <script>
     import MagnifyPlus from "vue-material-design-icons/MagnifyPlus";
     import MagnifyMinus from "vue-material-design-icons/MagnifyMinus";
     import ArrowCollapseAll from "vue-material-design-icons/ArrowCollapseAll";
     import FitToPage from "vue-material-design-icons/FitToPage";
     import Utils from "../../utils/utils";
-    import Kicon from "../Kicon"
     import {shallowRef} from "vue";
 
     export default {
-        components: {
-            Kicon,
-            MagnifyPlus,
-            MagnifyMinus,
-            ArrowCollapseAll,
-            FitToPage
-        },
         data() {
             return {
                 uuid: Utils.uid(),
@@ -93,13 +86,12 @@
     };
 </script>
 <style lang="scss" scoped>
-@import "../../styles/variable";
 .graph-wrapper {
     height: calc(100vh - 360px);
 }
 
 .top {
-    background-color: var(--gray-200);
+    background-color: var(--bs-gray-200);
 
     > div {
         margin: 6px;
diff --git a/ui/src/components/layout/DataTable.vue b/ui/src/components/layout/DataTable.vue
index e78a6c2fa1a..fbd6ac3f6b8 100644
--- a/ui/src/components/layout/DataTable.vue
+++ b/ui/src/components/layout/DataTable.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <nav class="mb-sm-4 mb-md-0" v-if="hasNavBar">
+        <nav v-if="hasNavBar">
             <collapse>
                 <slot name="navbar" />
             </collapse>
diff --git a/ui/src/components/layout/DateAgo.vue b/ui/src/components/layout/DateAgo.vue
index 4fe5fde0085..6727186720f 100644
--- a/ui/src/components/layout/DateAgo.vue
+++ b/ui/src/components/layout/DateAgo.vue
@@ -1,6 +1,6 @@
 <template>
-    <el-tooltip v-if="date" :content="inverted ? from : full">
-        <span>{{ inverted ? full : from }}</span>
+    <el-tooltip v-if="date" :content="inverted ? from : full" :persistent="false" transition="" :hide-after="0">
+        <span :class="className">{{ inverted ? full : from }}</span>
     </el-tooltip>
 </template>
 <script>
@@ -17,6 +17,10 @@
             format: {
                 type: String,
                 default: "LLLL"
+            },
+            className: {
+                type: String,
+                default: null
             }
         },
         computed: {
diff --git a/ui/src/components/layout/DateRange.vue b/ui/src/components/layout/DateRange.vue
index d79d4997524..a2708978388 100644
--- a/ui/src/components/layout/DateRange.vue
+++ b/ui/src/components/layout/DateRange.vue
@@ -155,54 +155,3 @@
         }
     };
 </script>
-<style scoped lang="scss">
-.time-line {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-:deep(.mx-datepicker) {
-    margin-right: 5px;
-
-}
-
-:deep(.mx-datepicker-popup) {
-    height: 272px;
-
-    .mx-datepicker-sidebar {
-        overflow-y: auto;
-    }
-}
-</style>
-
-<style lang="scss">
-@import "../../styles/_variable.scss";
-.mx-datepicker-popup {
-    height: 272px;
-
-    .mx-datepicker-sidebar {
-        width: 150px;
-        & + .mx-datepicker-content {
-            margin-left: 150px;
-        }
-
-        .mx-btn {
-            font-size: $font-size-xs;
-        }
-        max-height: 100%;
-        overflow-y: auto;
-
-        &::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
-        }
-
-        &::-webkit-scrollbar-track {
-            background-color: var(--gray-100);
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: var(--gray-300);
-        }
-    }
-}
-</style>
diff --git a/ui/src/components/layout/Duration.vue b/ui/src/components/layout/Duration.vue
index 4f54eec0059..0bdbf8fb0df 100644
--- a/ui/src/components/layout/Duration.vue
+++ b/ui/src/components/layout/Duration.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <el-tooltip v-if="histories" popper-class="duration-tt">
+        <el-tooltip v-if="histories" popper-class="duration-tt" :persistent="false" transition="" :hide-after="0">
             <template #content>
                 <span v-for="(history, index) in histories" :key="'tt-' + index">
                     <span class="square" :class="squareClass(history.state)" />
diff --git a/ui/src/components/layout/Labels.vue b/ui/src/components/layout/Labels.vue
index 504fbe57a7d..eba31d4d709 100644
--- a/ui/src/components/layout/Labels.vue
+++ b/ui/src/components/layout/Labels.vue
@@ -3,17 +3,17 @@
         <el-tag
             v-for="(value, key) in labels"
             :key="key"
-            class="mr-1"
-            type="info"
+            class="me-1 labels"
             size="small"
             disable-transitions
         >
             <router-link :to="link(key, value)">
-                <span class="text-primary">{{ key }}:</span> {{ value }}
+                {{ key }}: {{ value }}
             </router-link>
         </el-tag>
     </span>
 </template>
+
 <script>
     export default {
         props: {
@@ -50,8 +50,9 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/_variable.scss";
-:deep(.badge) {
-    font-size: $font-size-xs;
-}
+    :deep(.el-tag) {
+        & a {
+            color: var(--bs-white);;
+        }
+    }
 </style>
diff --git a/ui/src/components/layout/Markdown.vue b/ui/src/components/layout/Markdown.vue
index 248f1106827..d5d82f7d1b1 100644
--- a/ui/src/components/layout/Markdown.vue
+++ b/ui/src/components/layout/Markdown.vue
@@ -46,12 +46,11 @@
 </script>
 
 <style lang="scss">
-@import "../../styles/_variable.scss";
-.markdown {
-    a.header-anchor {
-        color: var(--gray-600);
-        font-size: $font-size-base;
-        font-weight: normal;
+    .markdown {
+        a.header-anchor {
+            color: var(--bs-gray-600);
+            font-size: var(--font-size-base);
+            font-weight: normal;
+        }
     }
-}
 </style>
diff --git a/ui/src/components/layout/MarkdownTooltip.vue b/ui/src/components/layout/MarkdownTooltip.vue
index 0aa37ea96ab..aab038ded42 100644
--- a/ui/src/components/layout/MarkdownTooltip.vue
+++ b/ui/src/components/layout/MarkdownTooltip.vue
@@ -12,6 +12,8 @@
             v-model="isOpen"
             :title="title"
             destroy-on-close
+            class="sm"
+            size=""
             :append-to-body="true"
         >
             <markdown class="markdown-tooltip" :source="description" />
diff --git a/ui/src/components/layout/News.vue b/ui/src/components/layout/News.vue
index 2033ad305f5..87c7317fb6f 100644
--- a/ui/src/components/layout/News.vue
+++ b/ui/src/components/layout/News.vue
@@ -1,10 +1,10 @@
 <template>
-    <a class="news-link" @click="show">
+    <a class="news-link" href="#" @click="show">
         <gift title="" />
         <CheckboxBlankCircle v-if="hasUnread" class="new" title="" />
     </a>
 
-    <el-drawer size="50%" v-if="isOpen" v-model="isOpen" destroy-on-close :append-to-body="true" :title="$t('feeds.title')">
+    <el-drawer size="50%" v-if="isOpen" v-model="isOpen" destroy-on-close :append-to-body="true" class="sm" :title="$t('feeds.title')">
         <div class="post" v-for="(feed, index) in feeds" :key="feed.id">
             <div v-if="feed.image" class="mt-2">
                 <img class="float-right" :src="feed.image" alt="">
@@ -12,13 +12,12 @@
             <h5>
                 {{ feed.title }}
             </h5>
-            <date-ago class="text-muted small" :inverted="true" :date="feed.publicationDate" format="LL" />
-
+            <date-ago className="text-muted small" :inverted="true" :date="feed.publicationDate" format="LL" />
 
             <markdown class="markdown-tooltip mt-3" :source="feed.description" />
 
-            <div class="text-right">
-                <a class="el-button el-button--primary mt-3 d-inline-block text-right" :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
+            <div class="text-end">
+                <a class="el-button el-button--primary mt-3 d-inline-block text-end" :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
             </div>
 
             <el-divider v-if="index !== feeds.length - 1" />
@@ -60,7 +59,9 @@
             },
         },
         methods: {
-            show() {
+            show(event) {
+                event.preventDefault();
+
                 localStorage.setItem("feeds", this.feeds[0].publicationDate)
                 this.hasUnread = this.isUnread();
                 this.isOpen = !this.isOpen;
@@ -81,61 +82,61 @@
 </script>
 
 <style lang="scss" scoped>
-@use 'element-plus/theme-chalk/src/mixins/function' as *;
-@import "../../styles/variable";
-
-.news-link {
-    font-size: $font-size-lg;
-    color: var(--gray-600);
-}
-
-.new {
-    font-size: $font-size-xs;
-    color: $red;
-    position: absolute;
-    margin-left: -8px;
-
-    animation-name: grow;
-    animation-duration: 1.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease-in;
-}
-
-@keyframes grow {
-    0% {
-        transform: scale(0.8);
-    }
-    50%  {
-        transform: scale(1.2);
+    .news-link {
+        font-size: var(--font-size-lg);
+        color: var(--bs-gray-600);
     }
-    100% {
-        transform: scale(0.8);
-    }
-}
 
-.post {
-    h5 {
-        font-weight: bold;
-        margin-bottom: 0;
-    }
+    .new {
+        font-size: calc(var(--font-size-sm) * 0.7);
+        color: var(--el-color-error);
+        position: absolute;
+        margin-left: -8px;
 
-    img {
-        max-height: 120px;
-        max-width: 240px;
-        padding-left: 20px;
-        padding-bottom: 20px;
+        animation-name: grow;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-timing-function: ease-in;
     }
 
-    hr {
-        border-top-color: var(--gray-700);
-        margin-top: calc(getCssVar('spacer') * 2);
-        margin-bottom: calc(getCssVar('spacer') * 2);
+    @keyframes grow {
+        0% {
+            transform: scale(0.8);
+        }
+        50%  {
+            transform: scale(1.2);
+        }
+        100% {
+            transform: scale(0.8);
+        }
     }
 
+    .post {
+        h5 {
+            font-weight: bold;
+            margin-bottom: 0;
+        }
 
-    a.el-button {
-        font-weight: bold;
-    }
-}
+        img {
+            max-height: 120px;
+            max-width: 240px;
+            padding-left: 20px;
+            padding-bottom: 20px;
+        }
+
+        hr {
+            border-top-color: var(--bs-gray-700);
+            margin-top: calc(var(--spacer) * 2);
+            margin-bottom: calc(var(--spacer) * 2);
+        }
 
+        .small {
+            font-size:  var(--font-size-sm);
+            opacity: 0.7;
+        }
+
+        a.el-button {
+            font-weight: bold;
+        }
+    }
 </style>
diff --git a/ui/src/components/layout/Pagination.vue b/ui/src/components/layout/Pagination.vue
index f5bdeda38cf..a65dab8b24c 100644
--- a/ui/src/components/layout/Pagination.vue
+++ b/ui/src/components/layout/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex">
+    <div class="d-flex pagination">
         <div class="flex-grow-1 d-sm-none d-md-inline-block page-size">
             <el-select
                 size="small"
@@ -15,7 +15,7 @@
                 />
             </el-select>
         </div>
-        <div class="mr-auto">
+        <div>
             <el-pagination
                 v-model:current-page="internalPage"
                 :page-size="internalSize"
@@ -31,11 +31,11 @@
 
         </div>
 
-        <small v-if="max" class="d-md-none d-lg-block total mr-1">
+        <small v-if="max" class="d-md-none d-lg-block total ms-2">
             {{ $t('Max displayable') }}: {{ max }}
         </small>
 
-        <small class="total text-total">
+        <small class="total text-total ms-2">
             {{ $t('Total') }}: {{ total }}
         </small>
     </div>
@@ -79,32 +79,33 @@
     };
 </script>
 <style scoped lang="scss">
-@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
+    @use 'element-plus/theme-chalk/src/mixins/mixins' as *;
 
-.el-select {
-    width: auto;
-}
+    .pagination {
+        margin-top: var(--spacer);
 
-.page-size {
+        .el-select {
+            width: auto;
+        }
 
-    @include res(xs) {
-        display: none;
-    }
-}
+        .page-size {
+            @include res(xs) {
+                display: none;
+            }
+        }
 
-.text-total {
-    color: getCssVar('text-color', 'primary');
-    font-weight: normal;
-}
+        .text-total {
+            color: var(--el-text-primary);
+            font-weight: normal;
+        }
 
-.total {
-    margin-top: 2px;
-    margin-bottom: 2px;
-    padding: 0 4px;
-    line-height: 1.8;
-    font-size: getCssVar('font-size', 'extra-small');
-    border-radius: getCssVar('border-radius', 'small');
-    border: 1px solid getCssVar('border-color');
-    white-space: nowrap;
-}
+        .total {
+            padding: 0 4px;
+            line-height: 1.85;
+            font-size: var(--el-font-size-extra-small);
+            border-radius: var(--bs-border-radius-sm);
+            border: 1px solid var(--bs-border-color);
+            white-space: nowrap;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/layout/RefreshButton.vue b/ui/src/components/layout/RefreshButton.vue
index bdba9752f00..ff689bb0baa 100644
--- a/ui/src/components/layout/RefreshButton.vue
+++ b/ui/src/components/layout/RefreshButton.vue
@@ -55,36 +55,3 @@
     };
 </script>
 
-<style lang="scss">
-@import "../../styles/variable";
-
-.btn-group {
-    .btn {
-        span.label {
-            display: none;
-        }
-    }
-}
-.navbar-collapse {
-    &.collapse.show {
-        .btn-group {
-            width: 100%;
-            display: flex !important;
-            .btn {
-                width: auto;
-                flex: 1;
-
-                @include media-breakpoint-up(sm) {
-                    span.label {
-                        display: inline-block;
-                    }
-
-                }
-
-            }
-        }
-    }
-}
-
-
-</style>
diff --git a/ui/src/components/layout/SearchField.vue b/ui/src/components/layout/SearchField.vue
index e37c00206a4..ab8866af2c9 100644
--- a/ui/src/components/layout/SearchField.vue
+++ b/ui/src/components/layout/SearchField.vue
@@ -15,21 +15,9 @@
     export default {
         emits: ["search"],
         components: {Magnify},
+        searchDebounce: undefined,
         created() {
-            if (this.$route.query.q) {
-                this.search = this.$route.query.q;
-            }
-            this.searchDebounce = debounce(300, () => {
-                this.$emit("search", this.search);
-
-                if (this.router) {
-                    const query = {...this.$route.query, q: this.search, page: 1};
-                    if (!this.search) {
-                        delete query.q;
-                    }
-                    this.$router.push({query});
-                }
-            });
+            this.init();
         },
         props: {
             router: {
@@ -37,18 +25,41 @@
                 default: true
             }
         },
+        watch: {
+            $route(oldValue, newValue) {
+                if (oldValue.name === newValue.name) {
+                    this.init()
+                }
+            }
+        },
         data() {
             return {
                 search: ""
             };
         },
         methods: {
+            init() {
+                if (this.$route.query.q) {
+                    this.search = this.$route.query.q;
+                }
+                this.searchDebounce = debounce(300, () => {
+                    this.$emit("search", this.search);
+
+                    if (this.router) {
+                        const query = {...this.$route.query, q: this.search, page: 1};
+                        if (!this.search) {
+                            delete query.q;
+                        }
+                        this.$router.push({query});
+                    }
+                });
+            },
             onInput() {
                 this.searchDebounce();
             },
         },
         unmounted() {
-            this.searchDebounce.cancel();
+            this.searchDebounce && this.searchDebounce.cancel();
         }
     };
 </script>
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index 6c69bb788ab..9740e112c27 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -1,31 +1,27 @@
 <template>
-    <nav v-if="topNavbar" class="top-line">
-        <ul>
-            <li class="top-title">
-                <h1 class="text-truncate">
-                    {{ title }}
-                </h1>
-                <el-breadcrumb>
-                    <el-breadcrumb-item>
-                        <router-link :to="{name: 'home'}">
-                            <home-outline /> {{ $t('home') }}
-                        </router-link>
-                    </el-breadcrumb-item>
+    <nav v-if="topNavbar">
+        <div class="top-title">
+            <h1 class="text-truncate">
+                {{ title }}
+            </h1>
+            <el-breadcrumb>
+                <el-breadcrumb-item>
+                    <router-link :to="{name: 'home'}">
+                        <home-outline /> {{ $t('home') }}
+                    </router-link>
+                </el-breadcrumb-item>
 
-                    <el-breadcrumb-item v-for="(item, x) in topNavbar.breadcrumb" :to="item.link" :key="x">
-                        <router-link :to="item.link">
-                            {{ item.label }}
-                        </router-link>
-                    </el-breadcrumb-item>
-                </el-breadcrumb>
-            </li>
-        </ul>
-        <ul class="ml-auto">
-            <li class="pt-3">
-                <Auth />
-                <news />
-            </li>
-        </ul>
+                <el-breadcrumb-item v-for="(item, x) in topNavbar.breadcrumb" :to="item.link" :key="x">
+                    <router-link :to="item.link">
+                        {{ item.label }}
+                    </router-link>
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="side ms-auto ps-2">
+            <Auth />
+            <news />
+        </div>
     </nav>
 </template>
 <script>
@@ -48,32 +44,19 @@
         }
     };
 </script>
-<style lang="scss">
-    @use "sass:math";
-    @use 'element-plus/theme-chalk/src/mixins/mixins' as *;
-    @import "../../styles/variable";
-
-    .top-line {
+<style lang="scss" scoped>
+    nav {
         display: flex;
         min-width: 0;
         max-width: 100%;
-        margin-bottom: 10px;
-
-        ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            flex-wrap: nowrap;
-            padding: 0;
-            flex-direction: row;
-            padding-top: 35px;
-        }
+        padding-top: calc(var(--spacer) * 2);
+        margin-bottom: calc(var(--spacer) * 2);
 
-      .top-title {
+        .top-title {
             overflow: hidden;
             h1 {
                 color: var(--el-primary);
-                margin-bottom: math.div($headings-margin-bottom, 2);
+                margin-bottom: calc(var(--spacer) * 0.5);
                 font-weight: bold;
 
                 html.dark & {
@@ -82,22 +65,30 @@
             }
 
             .el-breadcrumb {
-                border: 0;
-                padding: 0;
-                margin-bottom: 0;
-                background: transparent;
-                font-size: $font-size-sm;
-                text-transform: none;
+                color: var(--bs-secondary);
+                display: flex;
                 a {
-                    color: getCssVar('color', 'tertiary');
+                    font-weight: normal;
+                    color: var(--bs-secondary);
+                    white-space: nowrap;
+                }
+
+                .el-breadcrumb__separator {
+                    color: var(--bs-tertiary);
+                }
+
+                .el-breadcrumb__item {
+                    display: flex;
+                    flex-wrap: nowrap;
+                    float: none;
+                }
 
-                    html.dark & {
-                        color: getCssVar('color', 'secondary');
-                    }
+                .material-design-icon {
+                    height: 0.75rem;
+                    width: 0.75rem;
+                    margin-right: calc(var(--spacer) / 2);
                 }
             }
         }
     }
-
-
 </style>
diff --git a/ui/src/components/logs/LogLevelSelector.vue b/ui/src/components/logs/LogLevelSelector.vue
index 599fc170d11..a6e58e438cb 100644
--- a/ui/src/components/logs/LogLevelSelector.vue
+++ b/ui/src/components/logs/LogLevelSelector.vue
@@ -18,7 +18,7 @@
 </template>
 <script>
     export default {
-        emits: ["input"],
+        emits: ["update:modelValue"],
         data() {
             return {
                 levelOptions: [
@@ -42,7 +42,7 @@
         },
         methods: {
             onInput(value) {
-                this.$emit("input", value);
+                this.$emit("update:modelValue", value);
             },
         },
     };
diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
index 0fd3b6436f6..cf3597e60d6 100644
--- a/ui/src/components/logs/LogLine.vue
+++ b/ui/src/components/logs/LogLine.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="line text-monospace" v-if="filtered">
-        <span :class="levelClass" class="header-badge log-level">{{ log.level.padEnd(9) }}</span>
-        <span class="header-badge bg-light text-dark">
+    <div class="line font-monospace" v-if="filtered">
+        <span :class="levelClass" class="header-badge log-level el-tag">{{ log.level.padEnd(9) }}</span>
+        <span class="header-badge">
             {{ $filters.date(log.timestamp, "iso") }}
         </span>
         <span v-for="(meta, x) in metaWithValue" :key="x">
-            <span class="header-badge bg-light text-dark property">
+            <span class="header-badge property">
                 <span>{{ meta.key }}</span>
                 <template v-if="meta.router">
                     <router-link :to="meta.router">{{ meta.value }}</router-link>
@@ -13,7 +13,6 @@
                 <template v-else>
                     {{ meta.value }}
                 </template>
-
             </span>
         </span>
         <span class="message" v-html="message" />
@@ -81,11 +80,11 @@
             },
             levelClass() {
                 return {
-                    TRACE: "badge-info",
-                    DEBUG: "badge-secondary",
-                    INFO: "badge-primary",
-                    WARN: "badge-warning",
-                    ERROR: "badge-danger",
+                    TRACE: "",
+                    DEBUG: "el-tag--info",
+                    INFO: "el-tag--success",
+                    WARN: "el-tag--warning",
+                    ERROR: "el-tag--danger",
                 }[this.log.level];
             },
             filtered() {
@@ -103,62 +102,60 @@
     };
 </script>
 <style scoped lang="scss">
-@use "sass:math";
-@use 'element-plus/theme-chalk/src/mixins/function' as *;
-@import "../../styles/_variable.scss";
-
-div.line {
-    white-space: pre-wrap;
-    word-break: break-all;
-    padding: 0 calc(getCssVar('spacer') / 2);
-
-    .theme-dark & {
-        color: var(--body-color)
-    }
-
-    .header-badge {
-        display: inline-block;
-        font-size: 95%;
-        margin-left: calc((getCssVar('spacer') * -2));
-        padding: $badge-padding-y $badge-padding-x;
-        font-weight: $font-weight-base;
-        line-height: 1;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        margin-right: 10px;
-
-        & a {
-            margin-left: 6px;
-            color: var(--dark);
+    div.line {
+        white-space: pre-wrap;
+        word-break: break-all;
+        padding-right: calc(var(--spacer) / 2);
+
+        .el-tag {
+            border-radius: 0;
+            border: 0;
+            height: auto;
         }
 
-        &.log-level {
-            white-space: pre;
-        }
+        .header-badge {
+            display: inline-block;
+            font-size: 95%;
+            padding: calc(var(--spacer) / 3) calc(var(--spacer) / 3);
+            line-height: 1;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: baseline;
+            margin-right: calc(var(--spacer) / 3);
+            &:not(.el-tag) {
+                background-color: var(--bs-gray-300);
+            }
 
-        &.property {
-            padding: $badge-padding-y math.div($badge-padding-x, 2);
+            span:first-child {
+                margin-right: 6px;
+                font-family: var(--bs-font-sans-serif);
+                color: var(--bs-gray-400);
 
-            > span {
-                font-family: $font-family-sans-serif;
-                color: var(--gray-600);
+                html.dark & {
+                    color: var(--bs-gray-400-darken-15);
+                }
                 user-select: none;
+
+                &::after{
+                    content: ":";
+                }
+            }
+
+            &:not(.el-tag), & a {
+                color: var(--bs-gray-600);
             }
-        }
 
-        .theme-dark &.bg-light, .theme-dark &.bg-light a {
-            background-color: var(--gray-200-lighten-5) !important;
-            color: var(--gray-600) !important;
+            & a:hover {
+                color: var(--bs-link-color);
+            }
 
-            > span {
-                color: var(--gray-300-lighten-10) !important;
+            &.log-level {
+                white-space: pre;
             }
         }
-    }
 
-    .message {
-        padding: 0 $badge-padding-x;
+        .message {
+            padding: 0 calc(var(--spacer) / 2);
+        }
     }
-}
 </style>
diff --git a/ui/src/components/logs/LogList.vue b/ui/src/components/logs/LogList.vue
index deb4587097a..d62cf38d31d 100644
--- a/ui/src/components/logs/LogList.vue
+++ b/ui/src/components/logs/LogList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="execution" class="log-wrapper text-dark">
+    <div v-if="execution" class="log-wrapper">
         <div v-for="currentTaskRun in execution.taskRunList" :key="currentTaskRun.id">
             <template
                 v-if="displayTaskRun(currentTaskRun)"
@@ -9,22 +9,22 @@
                         <div>
 
                             <div class="attempt-header">
-                                <div class="attempt-number mr-1">
+                                <div class="attempt-number me-1">
                                     {{ $t("attempt") }} {{ index + 1 }}
                                 </div>
 
                                 <div class="task-id flex-grow-1" :id="`attempt-${index}-${currentTaskRun.id}`">
-                                    <el-tooltip>
+                                    <el-tooltip :persistent="false" transition="" :hide-after="0">
                                         <template #content>
+
                                             {{ $t("from") }} :
                                             {{ $filters.date(attempt.state.startDate) }}
                                             <br>
                                             {{ $t("to") }} :
                                             {{ $filters.date(attempt.state.endDate) }}
                                             <br>
-                                            <br>
                                             <clock />
-                                            {{ $t("duration") }} :
+                                            <strong>{{ $t("duration") }}:</strong>
                                             {{ $filters.humanizeDuration(attempt.state.duration) }}
                                         </template>
                                         <code>{{ currentTaskRun.taskId }}</code>
@@ -36,14 +36,14 @@
                                 </div>
 
                                 <div class="task-duration">
-                                    <small class="mr-1">
+                                    <small class="me-1">
                                         <clock />
-                                        <duration class="ml-2" :histories="attempt.state.histories" />
+                                        <duration class="ms-2" :histories="attempt.state.histories" />
                                     </small>
                                 </div>
 
                                 <div class="task-status">
-                                    <status :status="attempt.state.current" size="small" />
+                                    <status :status="attempt.state.current" />
                                 </div>
 
                                 <el-dropdown trigger="click">
@@ -119,6 +119,7 @@
         </div>
     </div>
 </template>
+
 <script>
     import {mapState} from "vuex";
     import LogLine from "./LogLine";
@@ -127,15 +128,12 @@
     import Metrics from "../executions/Metrics";
     import Outputs from "../executions/Outputs";
     import Clock from "vue-material-design-icons/Clock";
-    import LocationExit from "vue-material-design-icons/LocationExit";
-    import ChartAreaspline from "vue-material-design-icons/ChartAreaspline";
     import DotsVertical from "vue-material-design-icons/DotsVertical.vue";
     import State from "../../utils/state";
     import Status from "../Status";
     import SubFlowLink from "../flows/SubFlowLink"
     import TaskEdit from "override/components/flows/TaskEdit.vue";
     import Duration from "../layout/Duration";
-    import {shallowRef} from "vue";
 
     export default {
         components: {
@@ -143,10 +141,8 @@
             Restart,
             ChangeStatus,
             Clock,
-            LocationExit,
             Metrics,
             Outputs,
-            ChartAreaspline,
             DotsVertical,
             Status,
             SubFlowLink,
@@ -184,10 +180,6 @@
                 showOutputs: {},
                 showMetrics: {},
                 fullscreen: false,
-                icon: {
-                    ChartAreaspline: shallowRef(ChartAreaspline),
-                    LocationExit: shallowRef(LocationExit)
-                }
             };
         },
         watch: {
@@ -299,91 +291,77 @@
     };
 </script>
 <style lang="scss" scoped>
-@import "../../styles/_variable.scss";
+    .log-wrapper {
+        .line:nth-child(odd) {
+            background-color: var(--bs-gray-100);
+        }
 
-.log-wrapper {
+        .line:nth-child(even) {
+            background-color: var(--bs-gray-100-lighten-5);
+        }
 
-    .line:nth-child(odd) {
-        background-color: var(--gray-100);
-    }
+        .attempt-header {
+            display: flex;
 
-    .line:nth-child(even) {
-        background-color: var(--gray-100-lighten-5);
-    }
+            html.dark & {
+                background-color: var(--bs-gray-100);
+            }
 
-    .attempt-header {
-        display: flex;
-        font-family: $font-family-sans-serif;
-        font-size: $font-size-base;
-        margin-top: $paragraph-margin-bottom * 1.5;
-        line-height: $btn-line-height;
+            .attempt-number {
+                background: var(--bs-gray-400);
+                padding: .375rem .75rem;
+                white-space: nowrap;
+            }
 
-        .theme-dark & {
-            background-color: var(--gray-100);
-        }
+            .task-id, .task-duration {
+                padding: .375rem .75rem;
+            }
 
-        .attempt-number {
-            background: var(--gray-400);
-            padding: $btn-padding-y $btn-padding-x;
-            white-space: nowrap;
-        }
+            .task-id {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
 
-        .task-id, .task-duration {
-            padding: $btn-padding-y $btn-padding-x;
-        }
+            small {
+                color: var(--bs-gray-500);
+            }
 
-        .task-id {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+            .task-duration {
+                white-space: nowrap;
 
-        small {
-            color: var(--gray-500);
-        }
+            }
 
-        .task-duration {
-            white-space: nowrap;
+            .task-status {
+                button {
 
-        }
+                }
+            }
 
-        .task-status {
-            button {
+            :deep(button.el-button) {
+                border-radius: 0 !important;
                 height: 100%;
             }
         }
 
-        :deep(button.btn) {
-            border-radius: 0 !important;
-        }
+        .attempt-wrapper {
+            margin-bottom: var(--spacer);
 
-        :deep(.dropdown-menu) {
-            .dropdown-item {
-                span.material-design-icon {
-                    width: $font-size-base * 2;
-                }
+            div:first-child > * {
+                margin-top: 0;
             }
         }
-    }
 
-    .attempt-wrapper {
-        margin-bottom: $spacer;
-
-        div:first-child > * {
-            margin-top: 0;
+        .output {
+            margin-right: 5px;
         }
-    }
 
-    .output {
-        margin-right: 5px;
-    }
-
-    pre {
-        border: 1px solid var(--light);
-        background-color: var(--gray-200);
-        padding: 10px;
-        margin-top: 5px;
-        margin-bottom: 20px;
+        pre {
+            border: 1px solid var(--light);
+            background-color: var(--bs-gray-200);
+            padding: 10px;
+            margin-top: 5px;
+            margin-bottom: 20px;
+        }
     }
-}
 </style>
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index 357267d99cf..81511f576f0 100644
--- a/ui/src/components/logs/LogsWrapper.vue
+++ b/ui/src/components/logs/LogsWrapper.vue
@@ -11,20 +11,20 @@
                             data-type="flow"
                             v-if="$route.name !== 'flows/update'"
                             :value="$route.query.namespace"
-                            @input="onDataTableValue('namespace', $event)"
+                            @update:model-value="onDataTableValue('namespace', $event)"
                         />
                     </el-form-item>
                     <el-form-item>
                         <log-level-selector
                             :value="$route.query.level"
-                            @input="onDataTableValue('level', $event)"
+                            @update:model-value="onDataTableValue('level', $event)"
                         />
                     </el-form-item>
                     <el-form-item>
                         <date-range
                             :start-date="$route.query.startDate"
                             :end-date="$route.query.endDate"
-                            @input="onDataTableValue($event)"
+                            @update:model-value="onDataTableValue($event)"
                         />
                     </el-form-item>
                     <el-form-item>
@@ -39,7 +39,7 @@
                                 {{ $t('no result') }}
                             </el-alert>
                         </div>
-                        <div v-else class="logs-wrapper mb-2 text-dark">
+                        <div v-else class="logs-wrapper">
                             <template v-for="(log, i) in logs" :key="`${log.taskRunId}-${i}`">
                                 <log-line
                                     level="TRACE"
@@ -131,28 +131,26 @@
     };
 </script>
 <style lang="scss" scoped>
-@import "../../styles/_variable.scss";
-.log-panel {
-    > div.log-content {
-        margin-bottom: $spacer;
-        .navbar {
-            border: 1px solid var(--table-border-color);
+    .log-panel {
+        > div.log-content {
+            margin-bottom: var(--spacer);
+            .navbar {
+                border: 1px solid var(--bs-border-color);
+            }
         }
-    }
 
-    .logs-wrapper {
-        border: 1px solid var(--table-border-color);
-    }
+        .logs-wrapper {
+            border: 1px solid var(--bs-border-color);
+            margin-bottom: var(--spacer);
+        }
 
-    .line:nth-child(odd) {
-        background-color: var(--gray-100);
+        .line:nth-child(odd) {
+            background-color: var(--bs-gray-100-lighten-5);
 
-    }
+        }
 
-    .line:nth-child(even) {
-        background-color: var(--gray-100-lighten-5);
+        .line:nth-child(even) {
+            background-color: var(--bs-gray-100);
+        }
     }
-
-}
-
 </style>
diff --git a/ui/src/components/namespace/NamespaceSelect.vue b/ui/src/components/namespace/NamespaceSelect.vue
index 6e4ed514cc2..072d28180ea 100644
--- a/ui/src/components/namespace/NamespaceSelect.vue
+++ b/ui/src/components/namespace/NamespaceSelect.vue
@@ -79,26 +79,3 @@
     };
 </script>
 
-<style lang="scss" scoped>
-@import "../../styles/_variable.scss";
-@include media-breakpoint-up(md) {
-    .ns-selector {
-        width:550px !important;
-    }
-}
-
-.v-select{
-    $levels: 10;
-    $level-size: 6px;
-
-    @mixin level-x {
-        @for $i from 0 through $levels {
-            .level-#{$i} {
-                margin-left: $level-size * $i;
-            }
-        }
-    }
-
-    @include level-x;
-}
-</style>
diff --git a/ui/src/components/plugins/Plugin.vue b/ui/src/components/plugins/Plugin.vue
index ffc769c53ea..54ddeff7108 100644
--- a/ui/src/components/plugins/Plugin.vue
+++ b/ui/src/components/plugins/Plugin.vue
@@ -55,7 +55,8 @@
         },
         watch: {
             $route(oldValue, newValue) {
-                if (oldValue.name === newValue.name) {
+                console.log(oldValue, newValue);
+                if (newValue.name.startsWith("plugins/")) {
                     this.onRouterChange();
                 }
             }
@@ -90,12 +91,9 @@
 </script>
 
 <style lang="scss">
-    @use 'element-plus/theme-chalk/src/mixins/function' as *;
-    @import "../../styles/_variable.scss";
-
     .markdown {
         h1 {
-            font-size: $h2-font-size;
+            font-size: calc(var(--font-size-base) * 2);
         }
 
         blockquote {
@@ -105,7 +103,7 @@
         mark {
             background: var(--success);
             color: var(--white);
-            font-size: $font-size-sm;
+            font-size: var(--font-size-sm);
             padding: 2px 8px 2px 8px;
 
             * {
@@ -114,16 +112,16 @@
         }
 
         h2 {
-            margin-top: calc(getCssVar('spacer') * 2);
-            border-bottom: 1px solid var(--gray-500);
+            margin-top: calc(var(--spacer) * 2);
+            border-bottom: 1px solid var(--bs-gray-500);
             font-weight: bold;
-            color: var(--gray-700)
+            color: var(--bs-gray-700)
         }
 
         h3 {
             code {
                 display: inline-block;
-                font-size: $font-size-base * 1.10;
+                font-size: calc(var(--font-size-base) * 1.10);
                 font-weight: 400;
             }
         }
@@ -131,7 +129,7 @@
         h4 {
             code {
                 display: inline-block;
-                font-size: $font-size-base * 1.00;
+                font-size: calc(var(--font-size-base) * 1.00);
                 font-weight: 400;
             }
         }
diff --git a/ui/src/components/plugins/TaskIcon.vue b/ui/src/components/plugins/TaskIcon.vue
index 42c4cf2b9aa..7e623bd76a3 100644
--- a/ui/src/components/plugins/TaskIcon.vue
+++ b/ui/src/components/plugins/TaskIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-tooltip placement="left">
+    <el-tooltip placement="left" :persistent="false" transition="" :hide-after="0">
         <template #content>
             <span>
                 {{ tooltipStart }}
@@ -75,15 +75,13 @@
 </script>
 
 <style lang="scss" scoped>
-    @use "sass:math";
-    @import "../../styles/_variable.scss";
     div.wrapper {
         height: 100%;
         width: 100%;
-        font-size: $font-size-xs;
+        font-size: var(--font-size-xs);
 
         > .icon {
-            margin: math.div($btn-padding-x-sm, 2);
+            margin: calc(var(--spacer) / 5);
             height: calc(100% - 25px);
             display: block;
             background-size: contain;
@@ -93,9 +91,9 @@
 
         > .hover {
             position: absolute;
-            background: var(--indigo-lighten-15);
-            border-top: 1px solid $indigo;
-            color: $white;
+            background: var(--el-color-info-light-9);
+            border-top: 1px solid var(--bs-border-color);
+            color: var(--bs-body-color);
             font-size: 70%;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -104,12 +102,12 @@
             width: 100%;
             bottom: 0;
             text-align: center;
-            padding: math.div($btn-padding-y-sm, 2) 1px ;
+            padding: calc(var(--spacer) / 5);
         }
 
         &.flowable {
             > .hover {
-                background: var(--pink-darken-15);
+                background: var(--el-color-warning-light-9);
             }
         }
 
diff --git a/ui/src/components/plugins/Toc.vue b/ui/src/components/plugins/Toc.vue
index cd56a052cbb..d95a9fee5b4 100644
--- a/ui/src/components/plugins/Toc.vue
+++ b/ui/src/components/plugins/Toc.vue
@@ -1,36 +1,41 @@
 <template>
     <div class="plugins-list">
-        <el-collapse accordion >
-            <el-collapse-item
+        <el-collapse accordion>
+            <template
                 :title="plugin.manifest['X-Kestra-Title']"
-                :name="plugin.manifest['X-Kestra-Title']"
                 :key="plugin.manifest['X-Kestra-Title']"
-                v-for="(plugin, index) in plugins"
+                v-for="(plugin) in sortedPlugins(plugins)"
             >
-                <ul class="toc-h3">
-                    <li v-for="(types, namespace) in group(plugin, plugin.tasks)" :key="namespace">
-                        <h6>{{ namespace }}</h6>
-                        <ul class="toc-h4">
-                            <li v-for="(classes, type) in types" :key="type+'-'+ namespace">
-                                <h6>{{ $filters.cap(type) }}</h6>
-                                <ul class="section-nav toc-h5">
-                                    <li v-for="cls in classes" :key="cls">
-                                        <router-link
-                                            @click="$emit('routerChange')"
-                                            :to="{name: 'plugins/view', params: {cls: namespace + '.' + cls}}"
-                                        >
-                                            <div class="icon">
-                                                <task-icon :only-icon="true" :cls="namespace + '.' + cls" />
-                                            </div>
-                                            {{ cls }}
-                                        </router-link>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </el-collapse-item>
+                <el-collapse-item
+                    v-if="isVisible(plugin)"
+                    :name="plugin.manifest['X-Kestra-Title']"
+                    :title="plugin.manifest['X-Kestra-Title']"
+                >
+                    <ul class="toc-h3">
+                        <li v-for="(types, namespace) in group(plugin, plugin.tasks)" :key="namespace">
+                            <h6>{{ namespace }}</h6>
+                            <ul class="toc-h4">
+                                <li v-for="(classes, type) in types" :key="type+'-'+ namespace">
+                                    <h6>{{ $filters.cap(type) }}</h6>
+                                    <ul class="section-nav toc-h5">
+                                        <li v-for="cls in classes" :key="cls">
+                                            <router-link
+                                                @click="$emit('routerChange')"
+                                                :to="{name: 'plugins/view', params: {cls: namespace + '.' + cls}}"
+                                            >
+                                                <div class="icon">
+                                                    <task-icon :only-icon="true" :cls="namespace + '.' + cls" />
+                                                </div>
+                                                {{ cls }}
+                                            </router-link>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </el-collapse-item>
+            </template>
         </el-collapse>
     </div>
 </template>
@@ -55,58 +60,73 @@
             }
         },
         methods: {
+            sortedPlugins(plugins) {
+                return plugins
+                    .sort((a, b) => {
+                        const nameA = (a.manifest && a.manifest['X-Kestra-Title'] ? a.manifest['X-Kestra-Title'].toLowerCase() : ""),
+                            nameB = (b.manifest && b.manifest['X-Kestra-Title'] ? b.manifest['X-Kestra-Title'].toLowerCase() : "");
+
+                        return (nameA < nameB ? -1 : (nameA > nameB ? 1 : 0));
+                    })
+            },
             group(plugin) {
                 return Object.keys(plugin)
                     .filter(r => r === "tasks" || r === "triggers" || r === "conditions")
                     .flatMap(type => {
                         return (plugin[type] === undefined ? {} : plugin[type])
                             .map(task => {
+                                const namespace = task.substring(0, task.lastIndexOf("."));
+
                                 return {
                                     type: type,
-                                    namepace: task.substring(0, task.lastIndexOf(".")),
+                                    namespace: namespace,
                                     cls: task.substring(task.lastIndexOf(".") + 1)
                                 };
                             })
                     })
                     .reduce((accumulator, value)  => {
-                        accumulator[value.namepace] = accumulator[value.namepace] || {};
-                        accumulator[value.namepace][value.type] = accumulator[value.namepace][value.type] || [];
-                        accumulator[value.namepace][value.type].push(value.cls);
+                        accumulator[value.namespace] = accumulator[value.namespace] || {};
+                        accumulator[value.namespace][value.type] = accumulator[value.namespace][value.type] || [];
+                        accumulator[value.namespace][value.type].push(value.cls);
 
                         return accumulator;
-                    }, Object.create(null));
-            }
+                    }, Object.create(null))
+
+            },
+            isVisible(plugin) {
+                return [...plugin.tasks, ...plugin.triggers, ...plugin.conditions].length > 0
+            },
         }
     }
 </script>
 
 <style lang="scss">
-    @use "sass:math";
-    @use 'element-plus/theme-chalk/src/mixins/function' as *;
-    @import "../../styles/_variable.scss";
-
     .plugins-list {
-        font-size: $font-size-xs;
-
         ul {
             list-style: none;
             padding-inline-start: 0;
             margin-bottom: 0;
+            font-size: var(--font-size-xs);
+            margin-left: calc(var(--spacer) / 2);
+        }
+
+        h6, a {
+            word-break: break-all;
         }
 
         .toc-h3 {
             .icon {
-                width: $font-size-sm;
-                height: $font-size-sm;
+                width: var(--font-size-sm);
+                height: var(--font-size-sm);
                 display: inline-block;
                 position: relative;
             }
 
             .toc-h4 {
-                margin-left: getCssVar('spacer');
+                margin-left: var(--spacer);
                 h6 {
-                    font-size: $h6-font-size * 0.8;
-                    margin-bottom: calc(getCssVar('spacer') / 3);
+                    font-size: var(--font-size-sm);
+                    margin-bottom: calc(var(--spacer) / 3);
                 }
             }
         }
diff --git a/ui/src/components/settings/Settings.vue b/ui/src/components/settings/Settings.vue
index 3d4aa3208ac..4a2c6d3f074 100644
--- a/ui/src/components/settings/Settings.vue
+++ b/ui/src/components/settings/Settings.vue
@@ -48,7 +48,6 @@
 <script>
     import RouteContext from "../../mixins/routeContext";
     import NamespaceSelect from "../../components/namespace/NamespaceSelect";
-    import {mapState} from "vuex";
 
     export default {
         mixins: [RouteContext],
@@ -108,7 +107,6 @@
             },
         },
         computed: {
-            ...mapState("core", ["themes", "theme"]),
             routeInfo() {
                 return {
                     title: this.$t("settings")
diff --git a/ui/src/components/stats/DurationChart.vue b/ui/src/components/stats/DurationChart.vue
index 0f86a3c6b4a..86a77a2e43a 100644
--- a/ui/src/components/stats/DurationChart.vue
+++ b/ui/src/components/stats/DurationChart.vue
@@ -3,6 +3,9 @@
         <el-tooltip
             popper-class="tooltip-stats"
             :placement="(global ? 'bottom' : 'left')"
+            :persistent="false"
+            :hide-after="0"
+            transition=""
         >
             <template #content>
                 <span v-html="tooltipContent" />
diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
index 929ef3490b7..4261ff725f4 100644
--- a/ui/src/components/stats/StateChart.vue
+++ b/ui/src/components/stats/StateChart.vue
@@ -3,6 +3,9 @@
         <el-tooltip
             popper-class="tooltip-stats"
             :placement="(global ? 'bottom' : 'left')"
+            :persistent="false"
+            :hide-after="0"
+            transition=""
         >
             <template #content>
                 <span v-html="tooltipContent" />
diff --git a/ui/src/components/stats/StateGlobalChart.vue b/ui/src/components/stats/StateGlobalChart.vue
index 40ddf86e529..824208b44e3 100644
--- a/ui/src/components/stats/StateGlobalChart.vue
+++ b/ui/src/components/stats/StateGlobalChart.vue
@@ -10,7 +10,7 @@
                 />
             </template>
             <template v-else>
-                <el-alert type="info" :closable="false" class="text-muted m-0" show-icon>
+                <el-alert type="info" :closable="false" class="m-0" show-icon>
                     {{ $t('no result') }}
                 </el-alert>
             </template>
@@ -57,29 +57,27 @@
 </script>
 
 <style lang="scss">
-@import "../../styles/_variable.scss";
+    .state-global-charts {
+        position: relative;
+        height: 100px;
+        vertical-align: middle;
 
-.state-global-charts {
-    position: relative;
-    height: 100px;
-    vertical-align: middle;
 
+        .executions-charts {
+            user-select: none;
+            top: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+        }
 
-    .executions-charts {
-        user-select: none;
-        top: 0;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-    }
-
-    &.big {
-        height: 200px;
-
-        .executions-charts > div {
+        &.big {
             height: 200px;
+
+            .executions-charts > div {
+                height: 200px;
+            }
         }
     }
-}
 </style>
diff --git a/ui/src/components/taskruns/TaskRuns.vue b/ui/src/components/taskruns/TaskRuns.vue
index 99618f7ebb6..a9ddd782427 100644
--- a/ui/src/components/taskruns/TaskRuns.vue
+++ b/ui/src/components/taskruns/TaskRuns.vue
@@ -51,13 +51,13 @@
                     @row-dblclick="onRowDoubleClick"
                     @sort-change="onSort"
                 >
-                    <el-table-column prop="executionId" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('execution')">
+                    <el-table-column prop="executionId" :label="$t('execution')">
                         <template #default="scope">
                             <id :value="scope.row.executionId" :shrink="true" />
                         </template>
                     </el-table-column>
 
-                    <el-table-column prop="taskId" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('task')">
+                    <el-table-column prop="taskId" :label="$t('task')">
                         <template #default="scope">
                             <id :value="scope.row.taskId" :shrink="true" />
                         </template>
diff --git a/ui/src/components/templates/TemplateEdit.vue b/ui/src/components/templates/TemplateEdit.vue
index b948bdb4369..854e0a7be40 100644
--- a/ui/src/components/templates/TemplateEdit.vue
+++ b/ui/src/components/templates/TemplateEdit.vue
@@ -4,18 +4,13 @@
         <bottom-line v-if="canSave || canDelete">
             <ul>
                 <li>
-                    <el-button type="danger" v-if="canDelete" @click="deleteFile">
-                        <kicon>
-                            <delete />
-                            <span>{{ $t('delete') }}</span>
-                        </kicon>
+                    <el-button :icon="Delete" type="danger" v-if="canDelete" @click="deleteFile">
+                         {{ $t('delete') }}
                     </el-button>
 
                     <template v-if="canSave">
-                        <el-button @click="save" type="primary">
-                            <kicon>
-                                <content-save /> {{ $t('save') }}
-                            </kicon>
+                        <el-button :icon="ContentSave" @click="save" type="primary">
+                            {{ $t('save') }}
                         </el-button>
                     </template>
                 </li>
@@ -24,14 +19,17 @@
     </div>
 </template>
 
+<script setup>
+    import ContentSave from "vue-material-design-icons/ContentSave";
+    import Delete from "vue-material-design-icons/Delete";
+</script>
+
 <script>
     import flowTemplateEdit from "../../mixins/flowTemplateEdit";
     import {mapState} from "vuex";
     import unsavedChange from "../../mixins/unsavedChange";
-    import Kicon from "../Kicon"
 
     export default {
-        components: {Kicon},
         mixins: [flowTemplateEdit],
         data() {
             return {
diff --git a/ui/src/components/templates/Templates.vue b/ui/src/components/templates/Templates.vue
index d2dcd4ab91c..2d84ee69a71 100644
--- a/ui/src/components/templates/Templates.vue
+++ b/ui/src/components/templates/Templates.vue
@@ -62,28 +62,27 @@
 
         <bottom-line v-if="user && user.hasAnyAction(permission.TEMPLATE, action.CREATE)">
             <ul>
-
                 <li>
-                    <kicon>
-                        <router-link :to="{name: 'templates/create'}">
-                            <el-button type="primary">
-                                <plus />
-                                {{ $t('create') }}
-                            </el-button>
-                        </router-link>
-                    </kicon>
+                    <router-link :to="{name: 'templates/create'}">
+                        <el-button :icon="Plus" type="primary">
+                            {{ $t('create') }}
+                        </el-button>
+                    </router-link>
                 </li>
             </ul>
         </bottom-line>
     </div>
 </template>
 
+<script setup>
+    import Plus from "vue-material-design-icons/Plus";
+</script>
+
 <script>
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import NamespaceSelect from "../namespace/NamespaceSelect";
-    import Plus from "vue-material-design-icons/Plus";
     import Eye from "vue-material-design-icons/Eye";
     import BottomLine from "../layout/BottomLine";
     import RouteContext from "../../mixins/routeContext";
@@ -99,7 +98,6 @@
         mixins: [RouteContext, RestoreUrl, DataTableActions],
         components: {
             BottomLine,
-            Plus,
             Eye,
             DataTable,
             SearchField,
diff --git a/ui/src/main.js b/ui/src/main.js
index 4f594e66ca1..628df36099c 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -103,7 +103,6 @@ configureAxios((instance) => {
 
     store.$http = app.$http;
     store.axios = app.axios;
-
 }, store, router);
 
 
diff --git a/ui/src/mixins/restoreUrl.js b/ui/src/mixins/restoreUrl.js
index dd33e341190..3005c12cada 100644
--- a/ui/src/mixins/restoreUrl.js
+++ b/ui/src/mixins/restoreUrl.js
@@ -60,6 +60,11 @@ export default {
 
             for (const key in local) {
                 if (!query[key] && local[key]) {
+                    // empty array break the application
+                    if (local[key] instanceof Array && local[key].length === 0) {
+                        continue;
+                    }
+
                     query[key] = local[key]
                     change = true
                 }
diff --git a/ui/src/override/components/LeftMenu.vue b/ui/src/override/components/LeftMenu.vue
index d7e0cad56a7..25102060221 100644
--- a/ui/src/override/components/LeftMenu.vue
+++ b/ui/src/override/components/LeftMenu.vue
@@ -241,7 +241,7 @@
                 background-size: 179px 55px;
                 display: block;
 
-                .theme-dark & {
+                html.dark & {
                     background: url(../../../src/assets/logo-white.svg) 0 0 no-repeat;
                     background-size: 179px 55px;
                 }
@@ -252,10 +252,10 @@
     span.version {
         transition: 0.2s all;
         white-space: nowrap;
-        font-size: getCssVar('font-size', 'extra-small');
+        font-size: var(--el-font-size-extra-small);
         text-align: center;
         display: block;
-        color: getCssVar('color', 'tertiary');
+        color: var(--bs-tertiary);
     }
 </style>
 
@@ -264,11 +264,7 @@
 
     #side-menu {
         z-index: 1039;
-        border-right: 1px solid getCssVar('border-color');
-
-        .vsm--list {
-            transition: 0.2s all;
-        }
+        border-right: 1px solid var(--bs-border-color);
 
         .vsm--icon {
             transition: left 0.2s ease;
@@ -301,7 +297,7 @@
                 &.vsm--link_exact-active,
                 &.vsm--link_active {
                     box-shadow: none;
-                    border-left: 4px solid getCssVar('color', 'secondary');
+                    border-left: 4px solid var(--bs-secondary);
                 }
             }
 
@@ -309,14 +305,18 @@
             &_active {
                 font-weight: 700;
             }
+
+            &_disabled {
+                opacity: 1;
+            }
         }
 
         .vsm--toggle-btn {
             padding-top: 4px;
             background: transparent;
-            color: getCssVar('color', 'secondary');
+            color: var(--bs-secondary);
             height: 30px;
-            border-top: 1px solid getCssVar('border-color');
+            border-top: 1px solid var(--bs-border-color);
         }
 
         &.vsm_collapsed .vsm--icon {
@@ -328,8 +328,8 @@
             cursor: initial !important;
         }
 
-
         .vsm--dropdown {
+            background-color: var(--bs-gray-100);
             .vsm--title {
                 top: 3px;
             }
@@ -349,10 +349,10 @@
         }
 
         html.dark & {
-            background-color: getCssVar('gray-100-darken-5');
+            background-color: var(--bs-gray-100-darken-5);
 
             .vsm--dropdown {
-                background-color: getCssVar('gray-100-darken-5');
+                background-color: var(--bs-gray-100);
             }
         }
 
diff --git a/ui/src/override/components/flows/FlowEdit.vue b/ui/src/override/components/flows/FlowEdit.vue
index d8216764513..3e053aae170 100644
--- a/ui/src/override/components/flows/FlowEdit.vue
+++ b/ui/src/override/components/flows/FlowEdit.vue
@@ -1,3 +1,11 @@
+<script setup>
+    import ContentCopy from "vue-material-design-icons/ContentCopy";
+    import ContentSave from "vue-material-design-icons/ContentSave";
+    import Delete from "vue-material-design-icons/Delete";
+    import TriggerFlow from "../../../components/flows/TriggerFlow.vue"
+</script>
+
+
 <script>
     import FlowEdit from "../../../components/flows/FlowEdit";
     export default {
diff --git a/ui/src/override/components/flows/TaskEdit.vue b/ui/src/override/components/flows/TaskEdit.vue
index 223bb22e62c..16b16002e09 100644
--- a/ui/src/override/components/flows/TaskEdit.vue
+++ b/ui/src/override/components/flows/TaskEdit.vue
@@ -1,7 +1,7 @@
 <template>
     <component
         :is="component"
-        :icon="icon.CodeTags"
+        :icon="CodeTags"
         @click="onShow"
     >
         <span v-if="component !== 'el-button'">{{ $t('show task source') }}</span>
@@ -11,11 +11,11 @@
             v-model="isModalOpen"
             destroy-on-close
             lock-scroll
+            size=""
             :append-to-body="true"
         >
             <template #footer>
-                <el-button @click="saveTask" v-if="canSave" type="primary">
-                    <content-save />&nbsp;
+                <el-button :icon="ContentSave" @click="saveTask" v-if="canSave" type="primary">
                     <span>{{ $t('save') }}</span>
                 </el-button>
             </template>
@@ -32,21 +32,23 @@
         </el-drawer>
     </component>
 </template>
+
+<script setup>
+    import CodeTags from "vue-material-design-icons/CodeTags.vue";
+    import ContentSave from "vue-material-design-icons/ContentSave";
+</script>
+
 <script>
     import YamlUtils from "../../../utils/yamlUtils";
     import Editor from "../../../components/inputs/Editor";
-    import ContentSave from "vue-material-design-icons/ContentSave";
-    import CodeTags from "vue-material-design-icons/CodeTags";
     import {canSaveFlowTemplate} from "../../../utils/flowTemplate";
     import {mapState} from "vuex";
     import Utils from "../../../utils/utils";
-    import {shallowRef} from "vue";
 
     export default {
         components: {
             Editor,
             ContentSave,
-            CodeTags,
         },
         props: {
             component: {
@@ -117,7 +119,6 @@
                 uuid: Utils.uid(),
                 taskYaml: undefined,
                 isModalOpen: false,
-                icon: {CodeTags: shallowRef(CodeTags)}
             };
         },
         created() {
diff --git a/ui/src/stores/core.js b/ui/src/stores/core.js
index 94eb78b1ef0..e7470057cb7 100644
--- a/ui/src/stores/core.js
+++ b/ui/src/stores/core.js
@@ -1,8 +1,6 @@
 export default {
     namespaced: true,
     state: {
-        themes: undefined,
-        theme: undefined,
         message: undefined,
         error: undefined
     },
@@ -15,12 +13,6 @@ export default {
         }
     },
     mutations: {
-        setThemes(state, themes) {
-            state.themes = themes
-        },
-        setTheme(state, theme) {
-            state.theme = theme
-        },
         setMessage(state, message) {
             state.message = message
         },
diff --git a/ui/src/stores/settings.js b/ui/src/stores/settings.js
deleted file mode 100644
index 412c0b7a266..00000000000
--- a/ui/src/stores/settings.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-    namespaced: true,
-    state: {
-    },
-    actions: {
-    },
-    mutations: {
-    },
-    getters: {}
-}
\ No newline at end of file
diff --git a/ui/src/stores/store.js b/ui/src/stores/store.js
index 4867c9d478f..2cfa91a570a 100644
--- a/ui/src/stores/store.js
+++ b/ui/src/stores/store.js
@@ -9,7 +9,6 @@ import log from "./logs"
 import namespace from "./namespaces"
 import misc from "./miscs"
 import plugin from "./plugins"
-import settings from "./settings"
 import stat from "./stat"
 import template from "./template"
 import taskrun from "./taskruns"
@@ -18,7 +17,6 @@ export default {
     modules: {
         api,
         core,
-        settings,
         flow,
         template,
         execution,
diff --git a/ui/src/styles/_dark.scss b/ui/src/styles/_dark.scss
deleted file mode 100644
index b0768a538f1..00000000000
--- a/ui/src/styles/_dark.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-// Color system
-$white: #FFF;
-$gray-900: #d6e2f3;
-$gray-800: #d0d7e0;
-$gray-700: #c1c1d8;
-$gray-600: #7c89ad;
-$gray-500: #7989b4;
-$gray-400: #5f72b1;
-$gray-300: #283456;
-$gray-200: #292e40;
-$gray-100: #202331;
-$black: #000;
-
-$grays: (
-    '100': $gray-100,
-    '200': $gray-200,
-    '300': $gray-300,
-    '400': $gray-400,
-    '500': $gray-500,
-    '600': $gray-600,
-    '700': $gray-700,
-    '800': $gray-800,
-    '900': $gray-900,
-) !default;
-
-// Body
-$body-color: $gray-900;
-$body-bg: #1b1e2a;
-$overlay-bg: $body-bg;
-
-// Text
-$text-color-primary: $gray-900;
-$text-color-regular: $gray-700;
-$text-color-secondary: $gray-800;
-$text-color-placeholder: $gray-600;
-$text-color-disabled: $gray-700;
-
-$text-color: (
-    'primary': $text-color-primary,
-    'regular': $text-color-regular,
-    'secondary': $text-color-secondary,
-    'placeholder': $text-color-placeholder,
-    'disabled': $text-color-disabled,
-) !default;
-
-// Border
-$border-color-base: $gray-200;
-$border-color-light: lighten($border-color-base, 5%);
-$border-color-lighter: lighten($border-color-base, 10%);
-$border-color-extra-light: $white;
-$border-color-dark: darken($border-color-base, 5%);
-$border-color-darker: darken($border-color-base, 5%);
-
-$border-color: (
-    '': $border-color-base,
-    'light': $border-color-light,
-    'lighter': $border-color-lighter,
-    'extra-light': $border-color-extra-light,
-    'dark': $border-color-dark,
-    'darker': $border-color-darker,
-) !default;
-
-// Fill color
-$fill-color-base: #222635;
-$fill-color-light: lighten($fill-color-base, 5%);
-$fill-color-lighter: lighten($fill-color-base, 10%);
-$fill-color-extra-light: lighten($fill-color-base, 15%);
-$fill-color-dark: darken($fill-color-base, 5%);
-$fill-color-darker: darken($fill-color-base, 10%);
-$fill-color-blank: darken($fill-color-base, 7%);
-
-$fill-color: (
-    '': $fill-color-base,
-    'light': $fill-color-light,
-    'lighter': $fill-color-lighter,
-    'extra-light': $fill-color-extra-light,
-    'dark': $fill-color-dark,
-    'darker': $fill-color-darker,
-    'blank': $fill-color-blank,
-) !default;
-
diff --git a/ui/src/styles/_global.scss b/ui/src/styles/_global.scss
deleted file mode 100644
index 6172eca68b9..00000000000
--- a/ui/src/styles/_global.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-// Color system
-$blue: #1761fd !default;
-$indigo: #6610f2 !default;
-$purple: #6d81f5 !default;
-$pink: #fd3c97 !default;
-$red: #f5325c !default;
-$orange: #ff8500 !default;
-$yellow: #ffb822 !default;
-$green: #22b783 !default;
-$teal: #03d87f !default;
-$cyan: #12a4ed !default;
-
-$primary: #192A4E !default;
-$secondary: #4F83A5 !default;
-$tertiary: #9EBFD5 !default;
-
-$colors: (
-    'white': #ffffff,
-    'black': #000000,
-    'primary': (
-        'base': $primary,
-    ),
-    'success': (
-        'base': $green,
-    ),
-    'warning': (
-        'base': $yellow,
-    ),
-    'error': (
-        'base': $red,
-    ),
-    'info': (
-        'base': $cyan,
-    ),
-);
-
-
-$custom-colors: (
-    'secondary': (
-        'base': $secondary,
-    ),
-    'tertiary': (
-        'base': $tertiary,
-    ),
-    'blue': (
-        'base': $blue,
-    ),
-    'indigo': (
-        'base': $indigo,
-    ),
-    'purple': (
-        'base': $purple,
-    ),
-    'pink': (
-        'base': $pink,
-    ),
-    'red': (
-        'base': $red,
-    ),
-    'orange': (
-        'base': $orange,
-    ),
-    'yellow': (
-        'base': $yellow,
-    ),
-    'green': (
-        'base': $green,
-    ),
-    'teal': (
-        'base': $teal,
-    ),
-    'cyan': (
-        'base': $cyan,
-    ),
-);
-
-
-// Fonts
-$font-family: (
-    '':  '"Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    'monospace': '"Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-) !default;
-
-
-$font-size-base: 16px;
-
-$font-size: (
-    'extra-large': $font-size-base * 1.5,
-    'large': $font-size-base * 1.25,
-    'medium': $font-size-base * 1.15 ,
-    'base': $font-size-base,
-    'small': $font-size-base * 0.875,
-    'extra-small': $font-size-base * 0.75,
-) !default;
-
-$border-radius: (
-    'base': 4px,
-    'large': 8px,
-    'small': 2px,
-    'round': 20px,
-    'circle': 100%,
-) !default;
-
diff --git a/ui/src/styles/_light.scss b/ui/src/styles/_light.scss
deleted file mode 100644
index 39c30546505..00000000000
--- a/ui/src/styles/_light.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-// Color system
-$white: #FFF !default;
-$gray-100: #f8f8fc !default;
-$gray-200: #f1f5fa !default;
-$gray-300: #eaf0f9 !default;
-$gray-400: #b6c2e4 !default;
-$gray-500: #8997bd !default;
-$gray-600: #7081b9 !default;
-$gray-700: #303e67 !default;
-$gray-800: #2c3652 !default;
-$gray-900: #1d2c48 !default;
-$black: #000 !default;
-
-$grays: (
-    '100': $gray-100,
-    '200': $gray-200,
-    '300': $gray-300,
-    '400': $gray-400,
-    '500': $gray-500,
-    '600': $gray-600,
-    '700': $gray-700,
-    '800': $gray-800,
-    '900': $gray-900,
-) !default;
-
-// Body
-$body-color: $gray-700 !default;
-$body-bg: $gray-100 !default;
-$overlay-bg: $body-bg !default;
-
-// Text
-$text-color-primary: $gray-900;
-$text-color-regular: $gray-700;
-$text-color-secondary: $gray-800;
-$text-color-placeholder: $gray-600;
-$text-color-disabled: $gray-700;
-
-$text-color: (
-    'primary': $text-color-primary,
-    'regular': $text-color-regular,
-    'secondary': $text-color-secondary,
-    'placeholder': $text-color-placeholder,
-    'disabled': $text-color-disabled,
-) !default;
-
-// Border
-$border-color-base: $gray-300;
-$border-color-light: $gray-200;
-$border-color-lighter: $gray-100;
-$border-color-extra-light: $white;
-$border-color-dark: $gray-400;
-$border-color-darker: $gray-500;
-
-$border-color: (
-    '': $border-color-base,
-    'light': $border-color-light,
-    'lighter': $border-color-lighter,
-    'extra-light': $border-color-extra-light,
-    'dark': $border-color-dark,
-    'darker': $border-color-darker,
-) !default;;
-
-// Fill color
-$fill-color-base: $gray-300;
-$fill-color-light: lighten($fill-color-base, 5%);
-$fill-color-lighter: lighten($fill-color-base, 10%);
-$fill-color-extra-light: lighten($fill-color-base, 15%);
-$fill-color-dark: darken($fill-color-base, 5%);
-$fill-color-darker: darken($fill-color-base, 10%);
-$fill-color-blank: #FFFFFF;
-
-$fill-color: (
-    '': $fill-color-base,
-    'light': $fill-color-light,
-    'lighter': $fill-color-lighter,
-    'extra-light': $fill-color-extra-light,
-    'dark': $fill-color-dark,
-    'darker': $fill-color-darker,
-    'blank': $fill-color-blank,
-) !default;
-
diff --git a/ui/src/styles/_theme-dark.scss b/ui/src/styles/_theme-dark.scss
new file mode 100644
index 00000000000..c9053764c75
--- /dev/null
+++ b/ui/src/styles/_theme-dark.scss
@@ -0,0 +1,20 @@
+// gray
+$gray-900: #d6e2f3;
+$gray-800: #d0d7e0;
+$gray-700: #c1c1d8;
+$gray-600: #7c89ad;
+$gray-500: #7989b4;
+$gray-400: #5f72b1;
+$gray-300: #283456;
+$gray-200: #292e40;
+$gray-100: #202331;
+
+$light: $gray-200;
+$dark: $gray-100;
+
+// body
+$body-color: $gray-900;
+$border-color: $gray-200;
+$body-bg: #1b1e2a;
+$card-bg: #222635;
+
diff --git a/ui/src/styles/_variable.scss b/ui/src/styles/_variable.scss
index b1e6dde0085..1621cac4444 100644
--- a/ui/src/styles/_variable.scss
+++ b/ui/src/styles/_variable.scss
@@ -1,181 +1,65 @@
-$theme-name: "theme-light" !default;
+// color system
+$blue: #1761fd;
+$indigo: #6610f2;
+$purple: #6d81f5;
+$pink: #fd3c97;
+$red: #f5325c;
+$orange: #ff8500;
+$yellow: #ffb822;
+$green: #22b783;
+$teal: #03d87f;
+$cyan: #12a4ed;
+
+// primary color
+$primary: #192A4E;
+$secondary: #4F83A5;
+$tertiary: #9EBFD5;
+
+// gray
+$white: #FFF;
+$gray-100: #f8f8fc;
+$gray-200: #f1f5fa;
+$gray-300: #eaf0f9;
+$gray-400: #b6c2e4;
+$gray-500: #8997bd;
+$gray-600: #7081b9;
+$gray-700: #303e67;
+$gray-800: #2c3652;
+$gray-900: #1d2c48;
+$black: #000;
+
+$light: $gray-200;
+$dark: $gray-900;
+
+// fonts
+$font-size-base: 1rem;
+$font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-monospace: 'Source Code Pro', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-size-xs: $font-size-base * 0.75;
+
+// border radius
+$border-radius: 0.25rem;
+$border-radius-lg: 0.5rem;
+$border-radius-sm: 0.15rem;
+
+// layout
 $menu-width: 268px;
+$spacer: 1rem;
 
-// Color system
-$white: #FFF !default;
-$white-always: #FFF !default;
-$gray-100: #f8f8fc !default;
-$gray-200: #f1f5fa !default;;
-$gray-300: #eaf0f9 !default;;
-$gray-400: #b6c2e4 !default;;
-$gray-500: #8997bd !default;;
-$gray-600: #7081b9 !default;;
-$gray-700: #303e67 !default;;
-$gray-800: #2c3652 !default;;
-$gray-900: #1d2c48 !default;;
-$black: #000 !default;
-$black-always: #000 !default;
+// body
+$body-color: $gray-700;
+$border-color: $gray-300;
+$body-bg: $gray-100;
+$card-bg: $white;
 
-$blue: #1761fd !default;
-$indigo: #6610f2 !default;
-$purple: #6d81f5 !default;
-$pink: #fd3c97 !default;
-$red: #f5325c !default;
-$orange: #ff8500 !default;
-$yellow: #ffb822 !default;
-$green: #22b783 !default;
-$teal: #03d87f !default;
-$cyan: #12a4ed !default;
+$link-color: $cyan;
 
-$primary: #192A4E !default;
-$secondary: #4F83A5 !default;
-$tertiary: #9EBFD5 !default;
+// border radius
+$border-radius: .25rem;
+$border-radius-sm: .15rem;
 
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-200 !default;
-$light-always: $gray-200 !default;
-$dark: $gray-900 !default;
-$dark-always: $gray-900 !default;
-
-$yiq-contrasted-threshold: 200 !default;
-
-// Themes
-$theme-colors: (
-    "purple": $purple
-) !default;
-
-// Fonts
-$font-weight-bolder: 900;
-$enable-shadows: true;
-
-// Body
-$body-color: $gray-700 !default;
-$body-bg: $gray-100 !default;
-$link-color: $cyan !default;
-$border-color: $gray-300 !default;
-
-// Components
-$border-radius: 0.25rem !default;
-$border-radius-lg: 0.5rem !default;
-$border-radius-sm: 0.15rem  !default;
-
-// Fonts
-$font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-monospace: 'Source Code Pro', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-
-$font-size-base: 1rem !default;
-$font-size-sm: $font-size-base * .875 !default;
-$font-size-xs: $font-size-base * .75 !default;
-
-$headings-font-weight: 300 !default;
-$text-muted: $gray-500 !default;
-
-// Buttons
-$btn-font-weight: 300 !default;
-$input-btn-focus-box-shadow: none !default;
-$btn-box-shadow: none !default;
-$btn-focus-box-shadow:  none !default;
-$btn-active-box-shadow: none !default;
-
-// Dropdowns
-$dropdown-border-color: $border-color !default;
-$dropdown-divider-bg: $border-color !default;
-
-// Navs
-//$nav-link-disabled-color: $gray-400 !default;
-//$nav-tabs-border-color: $dropdown-border-color !default;
-//$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
-//$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
-
-// Navbar
-$navbar-dark-color: rgba($white, .7) !default;
-$navbar-dark-hover-color: $white !default;
-$navbar-toggler-font-size: $font-size-sm !default;
-
-// Pagination
-$pagination-color: var(--gray-600) !default;
-$pagination-bg: transparent !default;
-$pagination-disabled-bg: transparent !default;
-
-// Jumbotron
-$jumbotron-padding: 4rem !default;
-
-// Cards
-$card-inner-border-radius: $border-radius-lg !default;
-$card-border-radius: $border-radius-lg !default;
-$card-cap-bg: transparent !default;
-$card-border-color: $border-color !default;
-$card-bg: $white !default;
-
-// Badges
-$badge-font-weight: 300 !default;
-$badge-padding-x: 1rem !default;
-
-// Progress bars
-$progress-bg: $gray-200 !default;
-$progress-bar-color: $white !default;
-
-// List group
-$list-group-bg: transparent !default;
-$list-group-disabled-bg: $gray-200 !default;
-
-// Close
-$close-color: $gray-600 !default;
-$close-text-shadow: none !default;
-
-// Breadcrumb
-$breadcrumb-item-padding: 0.25rem !default;
-
-// pre
-$pre-color: $white !default;
-
-// abbr
-$mark-bg: $yellow !default;
-$mark-padding: 0.1rem 0.25rem !default;
-
-// tooltip
-$tooltip-bg: $black-always !default;
-$tooltip-color: $white-always !default;
-$tooltip-arrow-color: $black-always !default;
-
-// Table
-$table-bg: $white !default;
-$table-accent-bg: lighten($body-bg, 0.3%) !default;
-$table-hover-bg: darken($table-accent-bg, 3%) !default;
-$table-head-bg: darken($table-accent-bg, 3%) !default;
-
-// Pagination
-$pagination-active-color: $white-always !default;
-
-// Progress
-$progress-box-shadow: none !default;
-
-// Vue Bootstrap
-$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='" + $gray-500 + "' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
-$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='" + $gray-500 + "' d='M51 1l25 23 24 22H1l25-22z'/><path fill='" + $gray-500 + "' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
-$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='" + $gray-500 + "' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='" + $gray-500 + "' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
-
-$b-table-sort-icon-bg-not-sorted: $b-table-sort-icon-bg-dark-not-sorted;
-$b-table-sort-icon-bg-ascending: $b-table-sort-icon-bg-dark-ascending;
-$b-table-sort-icon-bg-descending: $b-table-sort-icon-bg-dark-descending;
-
-// forms
-$input-border-color: $border-color !default;
-$input-box-shadow: none !default;
-$custom-select-box-shadow: none !default;
-
-// modals
-$modal-backdrop-bg: #000;
-
-// popover
-$popover-inner-border-radius: $border-radius;
-
-// Import
+// bootstrap
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/vendor/rfs";
 @import '~bootstrap/scss/variables';
-
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 1b1c56565bc..e4a306084e5 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -1,102 +1,17 @@
-@use "global" as global-var;
-@use "light" as light-var;
-@use "dark" as dark-var;
-/*
-
-// reset
-@use "layout/reset";
+@use "variable" as global-var;
 
 // element-plus
-// element-plus light
-@forward 'element-plus/theme-chalk/src/common/var.scss' as light-* with (
-    // global one only
-    $font-family: global-var.$font-family,
-
-    // light theme
-    $colors: global-var.$colors,
-    $bg-color: (
-        'page': light-var.$body-bg,
-        '': light-var.$white,
-        'overlay': light-var.$overlay-bg,
-    ),
-
-    // font-size everywhere
-    $font-size: global-var.$font-size,
-    $border-radius: global-var.$border-radius,
-    $input-font-size: (
-        'large': getCssVar('font-size-large'),
-        'default': getCssVar('font-size-base'),
-        'small': getCssVar('font-size-small'),
-    ),
-    $checkbox: (
-        'font-size': getCssVar('font-size-base'),
-    ),
-    $select: (
-        'input-font-size': getCssVar('font-size-base'),
-    ),
-    $text-color: light-var.$text-color,
-    $border-color: light-var.$border-color,
-    $fill-color: light-var.$fill-color,
-);
-@use "element-plus/theme-chalk/src/index.scss" as light;
-
-// element-plus dark
-@forward 'element-plus/theme-chalk/src/dark/var.scss' as dark-* with (
-    $bg-color: (
-        'page': dark-var.$body-bg,
-        '':  darken(dark-var.$fill-color-base, 5%),
-        'overlay': dark-var.$overlay-bg,
-    ),
-    $text-color: dark-var.$text-color,
-    $border-color: dark-var.$border-color,
-    $fill-color: dark-var.$fill-color,
-);
-@use "element-plus/theme-chalk/src/dark/css-vars.scss" as dark;
+@use "layout/element-plus-overload";
 
+// layout
+@use "layout/root";
+@use "layout/root-dark";
+@use "layout/html-tag" as *;
 
-
-// Vue Sidebar Menu
-@use "~vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
-    $primary-color: global-var.$secondary,
-    $base-bg: light-var.$white,
-    $item-color: global-var.$tertiary,
-    $item-active-color: global-var.$secondary,
-    $item-font-size: global-var.$font-size-base,
-    $item-hover-color: global-var.$tertiary,
-    $item-hover-bg: darken(global-var.$secondary, 5%),
-);
-
-// third party
+// components
+@use "layout/charts";
 @use "components/vue-material-design-icon";
-*/
-@use "layout/elment-plus" as *;
-
-// Layout
-@use "layout/root" with (
-    $custom-colors: global-var.$custom-colors,
-    $white: light-var.$white,
-    $black: light-var.$black,
-    $light-grays: light-var.$grays,
-    $dark-grays: dark-var.$grays,
+@use "components/vue-nprogress" with (
+    $indigo: global-var.$indigo
 );
-@use "layout/app" as *;
-@use "./layout/charts";
-@use "./layout/navfilter";
-@use "components/vue-material-design-icon";
-
-//@import "variable";
-//@import "layout/root";
-//
-//@import '~bootstrap/scss/bootstrap';
-//@import '~bootstrap-vue/src/index.scss';
-//
-//
-//@import "components/vue-sidebar-menu";
-//
-//@import './layout/bootstrap';
 
-//
-//
-//
-//
-//
diff --git a/ui/src/styles/components/vue-material-design-icon.scss b/ui/src/styles/components/vue-material-design-icon.scss
index 86e383b36c7..7607b01bff1 100644
--- a/ui/src/styles/components/vue-material-design-icon.scss
+++ b/ui/src/styles/components/vue-material-design-icon.scss
@@ -1,3 +1,8 @@
+.material-design-icon {
+    > .material-design-icon__svg {
+        bottom: 0;
+    }
+}
 
 .material-design-icon.icon-2x {
   height: 2em;
diff --git a/ui/src/styles/components/vue-nprogress.scss b/ui/src/styles/components/vue-nprogress.scss
index a7afa7c73f0..422508c1884 100644
--- a/ui/src/styles/components/vue-nprogress.scss
+++ b/ui/src/styles/components/vue-nprogress.scss
@@ -1,3 +1,4 @@
+$indigo: "" !default;
 
 #nprogress {
     .bar {
diff --git a/ui/src/styles/layout/app.scss b/ui/src/styles/layout/app.scss
deleted file mode 100644
index f7c23bfb7d0..00000000000
--- a/ui/src/styles/layout/app.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
-
-$web-font-path: "https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700;900&display=swap" !default;
-
-@import url($web-font-path);
-
-body {
-    margin: 0;
-    width: 100%;
-    min-width: 320px;
-    min-height: 100vh;
-    line-height: 1.5;
-    font-size: getCssVar('font-size', 'base');
-    font-weight: 400;
-    color: var(--text-color);
-    background-color: getCssVar('bg-color', 'page');
-    font-family: getCssVar('font-family', '');
-    direction: ltr;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    transition: background-color var(--el-transition-duration-fast)
-}
-
-a {
-    color: getCssVar('color', 'info')
-}
-
-$theme-name: "theme-light" !default;
-
-#theme-loaded {
-    content: $theme-name;
-    display: none;
-}
-
-
diff --git a/ui/src/styles/layout/bootstrap.scss b/ui/src/styles/layout/bootstrap.scss
index 56f7c958489..5ebffc528af 100644
--- a/ui/src/styles/layout/bootstrap.scss
+++ b/ui/src/styles/layout/bootstrap.scss
@@ -1,841 +1,35 @@
-/* Typography *********************************************************************************************************/
-.text-secondary {
-    color: $gray-700 !important;
-}
-
-.text-white-always {
-    color: $white-always !important;
-}
-
-.text-black-always {
-    color: $black-always !important;
-}
-
-.text-dark-always {
-    color: $dark-always !important;
-}
-
-.blockquote-footer {
-    color: $gray-600;
-}
-
-pre {
-    background: $gray-800;
-    padding: 1rem;
-}
-
-blockquote {
-    border-left: 5px solid $gray-400;
-    margin-top: $spacer * 2;
-    padding: calc($spacer / 4)  0 calc($spacer / 4) $spacer;
-    color: $gray-500;
-    p {
-        margin-bottom: 0;
-    }
-}
-
-mark {
-    color: darken($yellow, 30);
-}
-
-:focus {
-    outline-width: 0;
-}
-
-.text-monospace {
-    font-size: $font-size-base * 0.7;
-}
-
-.text-muted {
-    font-weight: 300;
-}
-
-
-code[class*="language-"], pre[class*="language-"] {
-    font-size: $font-size-sm !important;
-    font-family: $font-family-monospace !important;
-    text-shadow: none !important;
-    line-height: 1.2 !important;
-}
+@import "../variable";
 
-.wrap {
-    word-wrap: break-word;
-}
-
-/* Colors *************************************************************************************************************/
-.bg-light-always {
-    background-color: $light-always;
-}
-
-/* Card ***************************************************************************************************************/
-.card {
-    header.card-header {
-        color: $secondary;
-        font-weight: bold;
-    }
-
-    .card-body {
-        .card {
-            box-shadow: none !important;
-
-            .card-body {
-                padding: 0;
-            }
-        }
-    }
-}
-
-/* Navbar *************************************************************************************************************/
-
-.navbar {
-    font-size: $font-size-sm;
-    font-weight: $headings-font-weight;
-
-    .content-wrapper & {
-        border: 0;
-
-        .navbar-collapse {
-            input,
-            .v-select,
-            .btn-group,
-            select,
-            .date-range {
-                margin-right: calc($spacer / 2);
-            }
-
-            &.collapse.show {
-                padding-top: calc($spacer / 2);
-
-                form.inline,
-                fieldset,
-                .date-range {
-                    width: 100%;
-                }
+$include-column-box-sizing: true !default;
 
-                .date-range {
-                    display: table;
-                    > div {
-                        display: table-cell;
-                    }
-                }
-
-                li.form-inline {
-                    width: 100%;
-                    display: block;
-                }
-
-                input,
-                .v-select,
-                .btn-group,
-                select,
-                .date-range {
-                    width: 100%;
-                    margin-right: 0;
-                }
-
-                input,
-                .v-select,
-                .btn-group,
-                select {
-                    display: block;
-                    margin-bottom: calc($spacer / 2);
-
-                    & input {
-                        margin-bottom: 0;
-                        width: 0;
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* Navs ***************************************************************************************************************/
-
-
-.nav-tabs {
-    .nav-link,
-    .nav-link.disabled,
-    .nav-link.disabled:hover,
-    .nav-link.disabled:focus {
-        border-color: $nav-tabs-border-color;
-    }
-
-    .nav-link:hover,
-    .nav-link:focus {
-        background-color: lighten($gray-200, 5%);
-    }
-}
-
-.nav-pills {
-    .active {
-        border: 1px solid darken($primary, 5%);
-    }
-}
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
 
-/* Buttons ************************************************************************************************************/
+@import "~bootstrap/scss/mixins/lists";
+@import "~bootstrap/scss/mixins/breakpoints";
+@import "~bootstrap/scss/mixins/container";
+@import "~bootstrap/scss/mixins/grid";
+@import "~bootstrap/scss/mixins/utilities";
 
-.btn {
-    &-primary {
-        border-color: darken($primary, 5%);
-    }
+@import "~bootstrap/scss/vendor/rfs";
 
-    &-secondary {
-        border-color: darken($secondary, 5%);
-    }
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
 
-    &-success {
-        border-color: darken($success, 5%);
-    }
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
 
-    &-info {
-        border-color: darken($info, 5%);
-        color: $white;
-    }
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/utilities/api";
 
-    &-danger {
-        border-color: darken($danger, 5%);
-    }
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/type";
 
-    &-warning {
-        border-color: darken($warning, 5%);
-        color: $white;
-    }
-
-    &-light {
-        border-color: darken($light, 5%);
-    }
-
-    &-dark {
-        border-color: darken($dark, 5%);
-    }
-
-    &.disabled,
-    &:disabled {
-        color: $white-always;
-    }
-}
-
-.btn-xs {
-    @include button-size(calc($btn-padding-y-sm / 2), calc($btn-padding-x-sm / 2), $btn-font-size-sm * 0.85, $btn-line-height-sm * 0.85, $btn-border-radius-sm);
-}
-
-/* Tables *************************************************************************************************************/
-
-table {
-    font-size: $font-size-sm;
-
-    thead th .sr-only {
-        display: none;
-    }
-}
-
-.table-responsive {
-    border-radius: $border-radius-lg;
-    border: 1px solid $border-color;
-
-
-    &.table-unrounded {
-        border-radius: 0;
-
-        .table {
-            border-radius: 0;
-        }
-    }
-
-    td {
-        word-break: break-all;
-    }
-}
-
-.table {
-    border-radius: $border-radius-lg;
-    background: $table-bg;
-
-    thead {
-        th {
-            background-color: $table-head-bg;
-            color: $table-head-color;
-            border-bottom-width: 0;
-            border-top-width: 0;
-        }
-    }
-
-    &-primary,
-    &-success,
-    &-info,
-    &-warning,
-    &-danger {
-        color: #fff;
-    }
-
-    &-primary {
-        &, > th, > td {
-            background-color: $primary;
-        }
-    }
-
-    &-secondary {
-        &, > th, > td {
-            background-color: $secondary;
-        }
-    }
-
-    &-light {
-        &, > th, > td {
-            background-color: $light;
-        }
-    }
-
-    &-dark {
-        &, > th, > td {
-            background-color: $dark;
-        }
-    }
-
-    &-success {
-        &, > th, > td {
-            background-color: $success;
-        }
-    }
-
-    &-info {
-        &, > th, > td {
-            background-color: $info;
-        }
-    }
-
-    &-danger {
-        &, > th, > td {
-            background-color: $danger;
-        }
-    }
-
-    &-warning {
-        &, > th, > td {
-            background-color: $warning;
-        }
-    }
-
-    &-active {
-        &, > th, > td {
-            background-color: $table-active-bg;
-        }
-    }
-
-    &-hover {
-        .table-primary:hover {
-            &, > th, > td {
-                background-color: darken($primary, 5%);
-            }
-        }
-
-        .table-secondary:hover {
-            &, > th, > td {
-                background-color: darken($secondary, 5%);
-            }
-        }
-
-        .table-light:hover {
-            &, > th, > td {
-                background-color: darken($light, 5%);
-            }
-        }
-
-        .table-dark:hover {
-            &, > th, > td {
-                background-color: darken($dark, 5%);
-            }
-        }
-
-        .table-success:hover {
-            &, > th, > td {
-                background-color: darken($success, 5%);
-            }
-        }
-
-        .table-info:hover {
-            &, > th, > td {
-                background-color: darken($info, 5%);
-            }
-        }
-
-        .table-danger:hover {
-            &, > th, > td {
-                background-color: darken($danger, 5%);
-            }
-        }
-
-        .table-warning:hover {
-            &, > th, > td {
-                background-color: darken($warning, 5%);
-            }
-        }
-
-        .table-active:hover {
-            &, > th, > td {
-                background-color: $table-active-bg;
-            }
-        }
-    }
-
-    th.row-action, td.row-action {
-        width: 16px;
-
-        a {
-            color: $body-color;
-        }
-    }
-
-    th.shrink {
-        width: 16px;
-    }
-
-    td.shrink {
-        white-space: nowrap;
-    }
-
-    th.row-graph {
-        width: 250px;
-        min-width: 250px;
-    }
-
-    td.row-graph {
-        padding: 0;
-        vertical-align: bottom;
-    }
-
-    td.row-duration {
-        padding: calc($table-cell-padding/2);
-    }
-
-    tr.disabled {
-        td {
-            opacity: 0.5;
-        }
-    }
-}
-
-/* Forms **************************************************************************************************************/
-
-label,
-.control-label,
-.help-block,
-.checkbox,
-.radio,
-.form-control-feedback {
-    font-size: $font-size-sm;
-}
+@import "~bootstrap/scss/helpers/text-truncation";
 
-select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-
-.form-group {
-    .input-group {
-        > div.v-select {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        > .input-group-append {
-            margin-right: 0;
-        }
-
-        > .v-select {
-            flex: 1;
-        }
-    }
-}
-
-form {
-    .form-group {
-        .custom-checkbox {
-            top: 8px;
-        }
-    }
-}
-
-.custom-file-label {
-    font-size: $input-font-size;
-    color: $input-placeholder-color;
-}
-
-.custom-file.b-form-file.is-valid {
-    .custom-file-label {
-        color: $input-color;
-    }
-}
-
-/* Breadcrumb *********************************************************************************************************/
-
-.breadcrumb {
-    border: 1px solid $dropdown-border-color;
-    border-radius: 3px;
-    font-size: $font-size-sm;
-    font-weight: 300;
-    text-transform: uppercase;
-}
-
-/* Pagination *********************************************************************************************************/
-
-.pagination {
-    font-weight: 300;
-
-    .page-link {
-        border-color: transparent;
-        margin-left: 0.1em;
-        margin-right: 0.1em;
-        border-radius: $border-radius-sm;
-
-        &:hover,
-        &:focus {
-            text-decoration: none;
-        }
-    }
-
-    .page-item.disabled {
-        .page-link {
-            border-color: transparent;
-        }
-    }
-}
-
-.pagination,
-.pagination-lg,
-.pagination-sm {
-    .page-item:first-child,
-    .page-item:last-child {
-        .page-link {
-            border-radius: 3px;
-        }
-    }
-}
-
-.list-group {
-    font-size: $font-size-sm;
-    font-weight: 300;
-}
-
-/* Indicators *********************************************************************************************************/
-
-.close {
-    opacity: 0.6;
-    text-shadow: none;
-
-    &:hover,
-    &:focus {
-        opacity: 1;
-    }
-}
-
-/* Alert **************************************************************************************************************/
-
-.alert {
-    font-size: $font-size-sm;
-    font-weight: 300;
-
-    &-primary {
-        &, > th, > td {
-            background-color: $primary;
-        }
-    }
-
-    &-secondary {
-        &, > th, > td {
-            background-color: $secondary;
-        }
-    }
-
-    &-success {
-        &, > th, > td {
-            background-color: $success;
-        }
-    }
-
-    &-info {
-        &, > th, > td {
-            background-color: $info;
-        }
-    }
-
-    &-danger {
-        &, > th, > td {
-            background-color: $danger;
-        }
-    }
-
-    &-warning {
-        &, > th, > td {
-            background-color: $warning;
-        }
-    }
-
-    &-dark {
-        &, > th, > td {
-            background-color: $dark;
-        }
-    }
-
-    &-light {
-        &, > th, > td {
-            background-color: $light;
-        }
-    }
-
-    .alert-link {
-        font-weight: normal;
-        text-decoration: underline;
-    }
-}
-
-/*Toast ***************************************************************************************************************/
-
-.toast {
-    .toast-body {
-        overflow: auto;
-        margin: $toast-padding-x;
-        padding: 0;
-    }
-}
-
-/* Badge **************************************************************************************************************/
-
-.badge {
-    padding-bottom: .3em;
-
-    &-warning,
-    &-info {
-        color: $white;
-    }
-}
-
-/* Progress bars ******************************************************************************************************/
-
-.progress[value] {
-    height: 22px;
-    padding: 2px;
-    background-color: #f6f6f6;
-    border: 1px solid #ccc;
-    @include box-shadow(none);
-}
-
-
-/* Popovers ***********************************************************************************************************/
-
-.popover-header {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-
-/* Tabs  **************************************************************************************************************/
-
-ul.nav-tabs {
-    .nav-link {
-        background-color: transparent;
-        border: 0 solid;
-        border-bottom-width: 4px;
-        border-bottom-color: transparent;
-        color: $secondary;
-        transition-duration: 300ms;
-        a {
-            color: $secondary;
-            text-decoration: none;
-        }
-
-        &.active,
-        &:hover.active {
-            font-weight: bold;
-            color: $primary;
-            border-bottom-color: $primary;
-            border-bottom-width: 4px;
-            background-color: transparent;
-
-            a {
-                color: $primary;
-            }
-        }
-
-        &:hover {
-            border-bottom-color: $secondary;
-            background: transparent;
-            border-bottom-width: 4px;
-        }
-    }
-}
-
-/* Modals *************************************************************************************************************/
-
-.modal {
-    .b-overlay {
-        min-height: 50px;
-    }
-
-    header.modal-header {
-        background-color: $primary;
-        color: $white-always;
-        h5 {
-            font-weight: bold;
-        }
-    }
-
-
-    .modal-title {
-        word-break: break-all;
-    }
-
-    .modal-content {
-        border: 1px solid var(--gray-300);
-    }
-
-    .modal-header {
-        border-bottom: 1px solid var(--gray-300);
-    }
-}
-
-.modal.left,
-.modal.right {
-    .modal-dialog {
-        position: fixed;
-        margin: auto;
-        height: 100%;
-        transform: translate3d(0%, 0, 0);
-        max-width: 95%;
-    }
-
-    .modal-content {
-        height: 100%;
-        border-radius: 0;
-        overflow-y: auto;
-        border-bottom: 0;
-        border-top: 0;
-
-        header {
-            border-radius: 0;
-        }
-
-        footer.modal-footer {
-            padding: calc($navbar-padding-y/2) $navbar-padding-x calc($navbar-padding-y/2) $navbar-padding-x;
-        }
-    }
-
-    .modal-body {
-    }
-}
-
-.modal.left {
-    .modal-dialog {
-        left: 0;
-    }
-}
-
-.modal.right {
-    .modal-dialog {
-        right: 0;
-    }
-}
-
-$modal-size: ("sm": $modal-sm, "md": $modal-md, "lg": $modal-lg, "xl": $modal-xl);
-
-@each $name, $size in $modal-size {
-    .modal.left,
-    .modal.right {
-        .modal-dialog.modal-#{$name} {
-            width: $size;
-        }
-    }
-
-    .modal.left {
-        &.fade {
-            .modal-dialog.modal-#{$name} {
-                left: -$size;
-                transition: opacity 0.3s linear, left 0.3s ease-out;
-            }
-        }
-    }
-
-    .modal.right {
-        &.fade {
-            .modal-dialog.modal-#{$name} {
-                right: -$size;
-                transition: opacity 0.3s linear, right 0.3s ease-out;
-            }
-        }
-    }
-}
-
-.modal.left {
-    &.show {
-        .modal-dialog {
-            left: 0 !important;
-        }
-    }
-}
-
-.modal.right {
-    &.show {
-        .modal-dialog {
-            right: 0 !important;
-        }
-    }
-}
-
-
-.modal.fullscreen {
-    .modal {
-        padding: 0 !important;
-    }
-
-    .modal-dialog {
-        max-width: 100%;
-        height: 100%;
-        margin: 0;
-        max-height: 100%;
-    }
-
-    .modal-content {
-        border: 0;
-        border-radius: 0;
-        min-height: 100%;
-        height: auto;
-    }
-}
-
-/* Accordion **********************************************************************************************************/
-
-.accordion {
-    &.card {
-        button {
-            border: 0;
-            font-weight: bold;
-            color: $gray-600;
-        }
-    }
-    &.card:not(:last-child) {
-        margin-top: 0;
-        border-bottom: 0;
-    }
-    .card-body {
-        padding: calc($spacer/2);
-    }
-    ul {
-        padding-left: 0;
-        list-style: none;
-
-        a {
-            color: $gray-600;
-            padding-left: $spacer;
-        }
-        ul {
-            margin-bottom: calc($spacer / 2);
-        }
-    }
-}
-
-.tooltip.auto-width {
-    .tooltip-inner {
-        white-space: nowrap;
-        max-width: none;
-    }
+// overload
+.font-monospace {
+    font-size: $font-size-base * 0.7;
 }
diff --git a/ui/src/styles/layout/charts.scss b/ui/src/styles/layout/charts.scss
index 3f29f91ae78..a055b47850e 100644
--- a/ui/src/styles/layout/charts.scss
+++ b/ui/src/styles/layout/charts.scss
@@ -15,14 +15,14 @@
 }
 
 .tooltip-stats {
-    font-size: getCssVar('font-size', 'extra-small');
+    font-size: var(--el-font-size-extra-small);
     .tooltip-inner {
         text-align: left;
     }
 
     h6 {
         font-weight: bold;
-        font-size: getCssVar('font-size', 'extra-small');
+        font-size: var(--el-font-size-extra-small);
     }
 
     span.square {
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
new file mode 100644
index 00000000000..b6ebef15c45
--- /dev/null
+++ b/ui/src/styles/layout/element-plus-overload.scss
@@ -0,0 +1,446 @@
+@use 'sass:math';
+@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
+@use 'element-plus/theme-chalk/src/' as *;
+@import "../variable";
+
+// button
+.el-button {
+    --el-button-disabled-border-color: var(--bs-border-color);
+
+    a:hover & {
+        color:  var(--el-button-text-color) !important;
+    }
+}
+
+// input
+.el-input, .el-date-editor {
+    --el-input-border-color: var(--bs-border-color);
+
+    html.dark & {
+        --el-input-bg-color: var(--bs-gray-100-darken-5);
+    }
+}
+
+.el-input, .el-input-number, .el-select, .el-date-editor.el-input {
+    width: 100%;
+}
+
+.el-input-file {
+    .el-input__wrapper {
+        padding-left: 0;
+        input {
+            line-height: 1.5;
+        }
+    }
+}
+.el-select {
+    .el-tag {
+        color: var(--el-select-input-color);
+
+        html.dark & {
+            background-color: var(--bs-gray-200);
+        }
+    }
+}
+
+.el-select__popper {
+    .el-select-dropdown__item {
+        &.selected {
+            background: var(--el-fill-color-dark);
+
+            html.dark & {
+                color: var(--el-text-color-primary);
+            }
+        }
+    }
+}
+
+.el-checkbox {
+    --el-checkbox-text-color: var(--bs-body-color);
+    --el-checkbox-checked-text-color: var(--bs-body-color);
+    --el-checkbox-font-size: var(--font-size-base);
+}
+
+.el-date-editor {
+    .el-input__icon {
+        margin-right: calc(var(--spacer) / 4);
+    }
+}
+
+// form horizontal
+form.ks-horizontal {
+    .el-form-item {
+        @include res(xs) {
+            display: block;
+        }
+
+        @include res(sm) {
+            .el-form-item__label {
+                max-width: (math.div(1, 24) * 4 * 100) * 1%;
+                flex: 0 0 (math.div(1, 24) * 4 * 100) * 1%;
+            }
+
+            .el-form-item__content {
+                align-items: flex-start;
+                max-width: (math.div(1, 24) * 20 * 100) * 1%;
+                flex: 0 0 (math.div(1, 24) * 20 * 100) * 1%;
+            }
+        }
+    }
+
+    .submit {
+        text-align: right;
+        .el-form-item__content {
+            max-width: 100%;
+            flex: 0 0 100%;
+        }
+
+        .el-button {
+            margin-left: auto;
+        }
+    }
+}
+
+// table
+.el-table {
+    --el-table-border-color: var(--bs-border-color);
+    --el-table-border: 1px solid var(--bs-border-color);
+
+    --el-table-header-text-color: var(--bs-body-color);
+    --el-table-row-hover-bg-color: var(--bs-gray-100-darken-5);
+    --el-table-header-bg-color: var(--bs-gray-100-darken-3);
+    --el-table-tr-bg-color: var(--bs-body-bg);
+
+    html.dark & {
+        --el-table-tr-bg-color: var(--card-bg);
+    }
+
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+    background-color: var(--bs-gray-100-lighten-2);
+    border-bottom-width: 0;
+
+    &--striped {
+        .el-table__body tr.el-table__row--striped:not(:hover) td.el-table__cell {
+            background: var(--bs-gray-100-darken-2);
+
+            html.dark & {
+                background: var(--bs-body-bg);
+            }
+        }
+    }
+
+    .el-table__cell {
+        vertical-align: top;
+    }
+
+
+    .el-table__inner-wrapper::before {
+        display: none;
+    }
+
+    th {
+        white-space: nowrap;
+        div.cell {
+            word-break: normal;
+            white-space: nowrap;
+        }
+    }
+
+    th.row-action, td.row-action {
+        width: 16px;
+        .cell {
+            white-space: nowrap;
+        }
+
+        a {
+            color: var(--bs-body-color);
+        }
+    }
+
+    th.shrink {
+        width: 16px;
+    }
+
+    td.shrink {
+        white-space: nowrap;
+    }
+
+    th.row-graph {
+        width: 250px;
+        min-width: 250px;
+    }
+
+    td.row-graph {
+        padding: 0;
+        vertical-align: bottom;
+    }
+
+    tr.disabled {
+        td {
+            opacity: 0.5;
+        }
+    }
+}
+
+// tabs
+.el-tabs {
+    .el-tabs__active-bar {
+        height: 4px;
+        background-color: var(--bs-secondary);
+    }
+
+    .el-tabs__item {
+        padding: 0;
+        transition: all 0.3s ease;
+        a {
+            padding: var(--spacer) calc(var(--spacer) * 1.5);
+            color: var(--bs-tertiary);
+        }
+
+        &.is-active {
+            color: var(--bs-secondary);
+            font-weight: 700;
+        }
+    }
+
+    .el-tabs__nav-wrap::after {
+        height: 1px;
+        background-color: var(--el-border-color);
+    }
+}
+
+// card
+.el-card {
+    border-radius: $border-radius-lg;
+    --el-card-border-color: var(--bs-border-color);
+    --el-card-border-radius: var(--bs-border-radius-lg);
+    color: var(--bs-body-color);
+    background-color: var(--card-bg);
+
+    .el-card__header {
+        padding: $card-cap-padding-y $card-cap-padding-x;
+        color: var(--bs-secondary);
+        font-weight: bold;
+    }
+
+    .el-card__body {
+        padding: calc(var(--spacer) / 2);
+    }
+}
+
+// message box
+.el-message-box {
+    --el-messagebox-title-color: var(--bs-body-text);
+    border: 1px solid var(--bs-border-color);
+}
+
+// popper
+.el-popper {
+    &.is-light {
+        border: 1px solid var(--bs-border-color);
+
+        .el-popper__arrow::before {
+            border: 1px solid var(--bs-border-color);
+        }
+    }
+
+    &.is-dark {
+        color: var(--bs-gray-100);
+        background: var(--bs-gray-900);
+        border: 1px solid var(--bs-border-color);
+        .el-popper__arrow::before {
+            border: 1px solid var(--bs-border-color);
+            background-color: var(--bs-gray-900);
+        }
+
+        html.dark & {
+            color: var(--bs-gray-900);
+            background: var(--bs-gray-100);
+
+            .el-popper__arrow::before {
+                background-color: var(--bs-gray-100);
+            }
+        }
+    }
+}
+
+// message box
+.el-pagination {
+    html.dark & {
+        --el-pagination-button-bg-color: var(--bs-gray-200);
+        --el-disabled-bg-color: var(--bs-gray-100);
+        --el-pagination-button-color: var(--bs-gray-600);
+        --el-pagination-hover-color: var(--bs-gray-800);
+    }
+}
+
+
+// dropdown
+.el-dropdown__popper {
+    --el-dropdown-menuItem-hover-fill: var(--bs-gray-300);
+    --el-dropdown-menuItem-hover-color: var(--bs-body-color);
+}
+
+// drawer
+.el-drawer {
+    &.ltr,
+    &.rtl {
+        width: 70%;
+        @include res(xs) {
+            width: 95%;
+        }
+
+        @include res(md) {
+            width: 70%;
+        }
+
+        @include res(lg) {
+            width: 35%;
+            min-width: 800px;
+        }
+
+        &.sm {
+            min-width: auto;
+
+            @include res(xs) {
+                width: 95%;
+            }
+
+            @include res(sm) {
+                width: 50%;
+            }
+
+            @include res(lg) {
+                width: 30%;
+            }
+
+        }
+    }
+
+    &.ttb,
+    &.btt {
+        height: 70%;
+        @include res(xs) {
+            height: 95%;
+        }
+
+        @include res(lg) {
+            height: 50%;
+        }
+
+        @include res(lg) {
+            height: 35%;
+            min-height: 600px;
+        }
+
+        &.sm {
+            height: 30%;
+            min-width: auto;
+
+        }
+    }
+
+    .el-drawer__header {
+        padding: var(--spacer);
+        margin-bottom: 0;
+        background-color: var(--bs-gray-300);
+        border-bottom: 1px solid var(--bs-border-color);
+        color: var(--bs-body-color);
+        font-weight: bold;
+        font-size: var(--font-size-lg);
+
+        html.dark & {
+            background-color: var(--bs-gray-200);
+        }
+    }
+}
+
+// popover
+.el-popper {
+    .el-popover__title {
+        color: var(--bs-body-color);
+    }
+}
+
+// loading
+.el-loading-mask {
+    backdrop-filter: blur(3px) opacity(0.85);
+    inset: 0;
+    background: none;
+    transition: backdrop-filter 0.2s;
+}
+
+// collapse
+.el-collapse {
+    --el-collapse-content-text-color: var(--bs-body-color);
+    --el-collapse-header-text-color: var(--bs-body-color);
+    --el-collapse-header-border-color: var(--bs-border-color);
+    --el-collapse-header-height: auto;
+    --el-collapse-header-font-size: var(--font-size-base);
+    --el-collapse-content-font-size: var(--font-size-base);
+    --el-collapse-border-color: var(--bs-border-color);
+
+    border-radius: var(--bs-border-radius-lg);
+    border: 1px solid var(--bs-border-color);
+
+    .el-collapse-item__header {
+        padding: calc(var(--spacer) / 2);
+        border-bottom: 1px solid var(--bs-border-color);
+        background-color: var(--bs-gray-100-lighten-2);
+    }
+
+    .el-collapse-item__content {
+        padding: calc(var(--spacer) / 2);
+    }
+}
+
+// alert
+.el-alert {
+    --el-alert-description-font-size: var(--font-size-sm);
+
+    .el-alert__description {
+        margin: 0;
+    }
+}
+
+// notifications
+.el-notification {
+    --el-notification-border-color: var(--bs-border-color);
+    --el-notification-title-color: var(--bs-body-color);
+
+    .el-notification__content {
+        text-align: left;
+    }
+
+    &.large {
+        width: 70%;
+        @include res(xs) {
+            width: 95%;
+        }
+
+        @include res(md) {
+            width: 70%;
+        }
+
+        @include res(lg) {
+            width: 35%;
+            min-width: 800px;
+        }
+    }
+}
+
+// tags
+.el-tag {
+    --el-tag-bg-color: var(--bs-gray-600);
+    --el-tag-hover-color: var(--bs-gray-600-darken-2);
+    border: 0;
+    color: var(--bs-white);
+
+    @each $i in (primary, success, warning, danger, error, info) {
+        &.el-tag--#{$i} {
+            --el-tag-bg-color: var(--el-color-#{$i});
+            --el-tag-hover-color: var(--el-color-#{$i}-dark-2);
+        }
+    }
+}
diff --git a/ui/src/styles/layout/elment-plus.scss b/ui/src/styles/layout/elment-plus.scss
deleted file mode 100644
index 648de5407a5..00000000000
--- a/ui/src/styles/layout/elment-plus.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@use 'sass:math';
-@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
-@use 'element-plus/theme-chalk/src/' as *;
-
-// Input
-.el-input, .el-input-number, .el-select, .el-date-editor.el-input {
-    width: 100%;
-}
-
-.el-input-file {
-    .el-input__wrapper {
-        padding-left: 0;
-        input {
-            line-height: 1.5;
-        }
-    }
-}
-
-
-.el-select__popper {
-    .el-select-dropdown__item {
-        &.selected {
-            background: getCssVar('fill-color', 'dark');
-
-
-            html.dark & {
-                color: getCssVar('text-color', 'primary');
-            }
-        }
-    }
-}
-
-// Form Horizontal
-form.ks-horizontal {
-    .el-form-item {
-        @include res(xs) {
-            display: block;
-        }
-
-        @include res(sm) {
-            .el-form-item__label {
-                max-width: (math.div(1, 24) * 4 * 100) * 1%;
-                flex: 0 0 (math.div(1, 24) * 4 * 100) * 1%;
-            }
-
-            .el-form-item__content {
-                align-items: flex-start;
-                max-width: (math.div(1, 24) * 20 * 100) * 1%;
-                flex: 0 0 (math.div(1, 24) * 20 * 100) * 1%;
-            }
-        }
-    }
-}
-
-// Table
-.el-table {
-    margin-bottom: getCssVar('spacer');
-    border-radius: getCssVar('border-radius', 'large');
-    border: 1px solid getCssVar('border-color');
-    //background: $table-bg;
-    //display: block;
-    //width: 100%;
-    //overflow-x: auto;
-
-    .el-table__cell {
-        padding: 12px;
-    }
-
-    th {
-        white-space: nowrap;
-        div.cell {
-            word-break: normal;
-            white-space: nowrap;
-        }
-    }
-
-    th.row-action, td.row-action {
-        width: 16px;
-        .cell {
-            white-space: nowrap;
-        }
-
-        a {
-            color: getCssVar('text-color');
-        }
-    }
-
-    th.shrink {
-        width: 16px;
-    }
-
-    td.shrink {
-        white-space: nowrap;
-    }
-
-    th.row-graph {
-        width: 250px;
-        min-width: 250px;
-    }
-
-    td.row-graph {
-        padding: 0;
-        vertical-align: bottom;
-    }
-
-    td.row-duration {
-        //padding: calc($table-cell-padding/2);
-    }
-
-    tr.disabled {
-        td {
-            opacity: 0.5;
-        }
-    }
-}
diff --git a/ui/src/styles/layout/html-tag.scss b/ui/src/styles/layout/html-tag.scss
new file mode 100644
index 00000000000..ac43911cd1e
--- /dev/null
+++ b/ui/src/styles/layout/html-tag.scss
@@ -0,0 +1,34 @@
+@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
+a {
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+button {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+[placeholder] {
+    text-overflow: ellipsis;
+}
+
+pre {
+    overflow: hidden;
+    background: var(--bs-gray-200);
+    color: var(--bs-body-color);
+    padding: var(--spacer);
+}
+
+blockquote {
+    border-left: 5px solid var(--bs-gray-400);
+    margin-top: calc(var(--spacer) * 2);
+    padding: calc(var(--spacer) / 4)  0 calc(var(--spacer) / 4) var(--spacer);
+    color: var(--bs-gray-500);
+    p {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/ui/src/styles/layout/navfilter.scss b/ui/src/styles/layout/navfilter.scss
deleted file mode 100644
index 047ff31ecbf..00000000000
--- a/ui/src/styles/layout/navfilter.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.nav-filter {
-    padding: 0;
-}
diff --git a/ui/src/styles/layout/reset.scss b/ui/src/styles/layout/reset.scss
deleted file mode 100644
index 02168d97c8f..00000000000
--- a/ui/src/styles/layout/reset.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import '~bootstrap/scss/bootstrap-reboot';
-@import '~bootstrap/scss/bootstrap-grid';
-@import '~bootstrap/scss/bootstrap-utilities';
-//
-//@import '~bootstrap/scss/utilities/align';
-//@import '~bootstrap/scss/utilities/background';
-//@import '~bootstrap/scss/utilities/float';
-//@import '~bootstrap/scss/utilities/text';
-
-//@import '~bootstrap/scss/code';
-@import '~bootstrap/scss/type';
-@import '~bootstrap/scss/progress';
-
-a {
-    text-decoration: none;
-}
-
-button {
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: none;
-    }
-}
-
-[placeholder] {
-    text-overflow: ellipsis;
-}
\ No newline at end of file
diff --git a/ui/src/styles/layout/root-dark.scss b/ui/src/styles/layout/root-dark.scss
new file mode 100644
index 00000000000..f88327c2dc2
--- /dev/null
+++ b/ui/src/styles/layout/root-dark.scss
@@ -0,0 +1,51 @@
+@use 'sass:map';
+@import "../theme-dark";
+
+// Bootstrap
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/vendor/rfs";
+@import '~bootstrap/scss/variables';
+
+html.dark {
+    #{--bs-gray}: #{map.get($grays, "600")};
+    @each $key, $value in $grays {
+        --bs-gray-#{$key}: #{$value};
+
+        @each $i in (2, 3, 5, 7, 10, 15) {
+            #{--bs-gray-#{$key}-lighten-#{$i}}: #{lighten($value, $i)};
+            #{--bs-gray-#{$key}-darken-#{$i}}: #{darken($value, $i)};
+        }
+    }
+
+    #{--bs-body-color}: $body-color;
+    #{--bs-body-bg}: $body-bg;
+    #{--bs-border-color}: $border-color;
+    #{--card-bg}: $card-bg;
+
+
+    --el-bg-color: var(--bs-body-bg);
+    --el-bg-color-page: var(--bs-body-bg);
+    --el-bg-color-overlay: var(--bs-gray-100-darken-5);
+
+    --el-text-color-primary: var(--bs-primary);
+    --el-text-color-regular: var(--bs-body-color);
+    --el-text-color-secondary: var(--bs-secondary);
+    --el-text-color-placeholder: var(--bs-gray-600);
+    --el-text-color-disabled: var(--bs-gray-500);
+
+    --el-border-color: var(--bs-border-color);
+    --el-border-color-light: var(--bs-secondary);
+    --el-border-color-lighter: var(--bs-secondary);
+    --el-border-color-extra-light: var(--bs-secondary);
+    --el-border-color-dark: var(--bs-secondary);
+    --el-border-color-darker: var(--bs-secondary);
+
+    --el-fill-color: var(--bs-gray-700);
+    --el-fill-color-light: var(--bs-gray-600);
+    --el-fill-color-lighter: var(--bs-gray-500);
+    --el-fill-color-extra-light: var(--bs-gray-400);
+    --el-fill-color-dark: var(--bs-gray-800);
+    --el-fill-color-darker: var(--bs-gray-900);
+    --el-fill-color-blank: var(--bs-card-bg);
+}
diff --git a/ui/src/styles/layout/root.scss b/ui/src/styles/layout/root.scss
index 2b7bf479192..9ffbfa18786 100644
--- a/ui/src/styles/layout/root.scss
+++ b/ui/src/styles/layout/root.scss
@@ -2,56 +2,95 @@
 @use 'sass:math';
 @use 'element-plus/theme-chalk/src/mixins/var' as *;
 
-$custom-colors: () !default;
-$light-grays: () !default;
-$dark-grays: () !default;
-$white: #FFFFFF !default;
-$black: #000000 !default;
 
-$types: map.keys($custom-colors);
+@import "../variable";
 
+// use bootstrap for main style
 :root {
-    @include set-css-var-value(('menu-width'), 268px);
-    @include set-css-var-value(('spacer'), 16px);
+    --el-bg-color: var(--bs-body-bg);
+    --el-bg-color-page: var(--bs-body-bg);
+    --el-bg-color-overlay: var(--bs-white);
 
-    @each $key, $value in $light-grays {
-        @include set-css-var-value(('gray', $key), $value);
+    --el-text-color-primary: var(--bs-primary);
+    --el-text-color-regular: var(--bs-body-color);
+    --el-text-color-secondary: var(--bs-secondary);
+    --el-text-color-placeholder: var(--bs-gray-600);
+    --el-text-color-disabled: var(--bs-gray-500);
 
-        @for $i from 1 through 3 {
-            @include set-css-var-value(('gray', $key, 'lighten', $i*5), lighten($value, $i+5));
-            @include set-css-var-value(('gray', $key, 'darken', $i*5), darken($value, $i+5));
-        }
-    }
+    --el-border-color: var(--bs-border-color);
+    --el-border-color-light: var(--bs-border-color);
+    --el-border-color-lighter: var(--bs-border-color);
+    --el-border-color-extra-light: var(--bs-border-color);
+    --el-border-color-dark: var(--bs-border-color);
+    --el-border-color-darker: var(--bs-border-color);
 
-    @each $type in $types {
-        @include set-css-var-value(('color', $type), map.get($custom-colors, $type, 'base'));
+    --el-fill-color: var(--bs-gray-300);
+    --el-fill-color-light: var(--bs-gray-200);
+    --el-fill-color-lighter: var(--bs-gray-100);
+    --el-fill-color-extra-light: var(--bs-white);
+    --el-fill-color-dark: var(--bs-gray-400);
+    --el-fill-color-darker: var(--bs-gray-500);
+    --el-fill-color-blank: var(--bs-white);
+    //--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    //--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    //--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+    //--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+    //--el-disabled-bg-color: var(--el-fill-color-light);
+    //--el-disabled-text-color: var(--el-text-color-placeholder);
+    //--el-disabled-border-color: var(--el-border-color-light);
+    //--el-overlay-color: rgba(0, 0, 0, 0.8);
+    //--el-overlay-color-light: rgba(0, 0, 0, 0.7);
+    //--el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+    //--el-mask-color: rgba(255, 255, 255, 0.9);
+    //--el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+    //--el-border-width: 1px;
+    //--el-border-style: solid;
+    //--el-border-color-hover: var(--el-text-color-disabled);
+    //--el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+    //--el-svg-monochrome-grey: var(--el-border-color);
+}
 
-        @for $i from 1 through 3 {
-            @include set-css-var-value(('color', $type, 'lighten', $i*5), lighten(map.get($custom-colors, $type, 'base'), $i+5));
-            @include set-css-var-value(('color', $type, 'darken', $i*5), darken(map.get($custom-colors, $type, 'base'), $i+5));
-        }
 
-        @each $i in (3, 5, 7, 8, 9) {
-            @include set-css-var-value(
-                ('color', $type, 'light', $i),
-                mix($white, map.get($custom-colors, $type, 'base'), math.percentage(math.div($i, 10)))
-            );
-        }
+:root {
+    #{--menu-width}: $menu-width;
+    #{--spacer}: $spacer;
 
-        @include set-css-var-value(
-            ('color', $type, 'dark', 2),
-            mix($black, map.get($custom-colors, $type, 'base'), math.percentage(math.div(2, 10)))
-        );
-    }
-}
+    #{--font-size-xs}: $font-size-xs;
+    #{--font-size-sm}: $font-size-sm;
+    #{--font-size-base}: $font-size-base;
+    #{--font-size-lg}: $font-size-lg;
+    #{--card-bg}: $card-bg;
+
+    #{--bs-tertiary}: $tertiary;
 
-html.dark {
-    @each $key, $value in $dark-grays {
-        @include set-css-var-value(('gray', $key), $value);
+    #{--bs-gray}: #{map.get($grays, "600")};
+    @each $key, $value in $grays {
+        --bs-gray-#{$key}: #{$value};
 
-        @for $i from 1 through 3 {
-            @include set-css-var-value(('gray', $key, 'lighten', $i*5), lighten($value, $i+5));
-            @include set-css-var-value(('gray', $key, 'darken', $i*5), darken($value, $i+5));
+        @each $i in (2, 3, 5, 7, 10, 15) {
+            #{--bs-gray-#{$key}-lighten-#{$i}}: #{lighten($value, $i)};
+            #{--bs-gray-#{$key}-darken-#{$i}}: #{darken($value, $i)};
         }
     }
-}
\ No newline at end of file
+
+    //@each $type in $types {
+    //    @include set-css-var-value(('color', $type), map.get($custom-colors, $type, 'base'));
+    //
+    //    @for $i from 1 through 3 {
+    //        @include set-css-var-value(('color', $type, 'lighten', $i*5), lighten(map.get($custom-colors, $type, 'base'), $i+5));
+    //        @include set-css-var-value(('color', $type, 'darken', $i*5), darken(map.get($custom-colors, $type, 'base'), $i+5));
+    //    }
+    //
+    //    @each $i in (3, 5, 7, 8, 9) {
+    //        @include set-css-var-value(
+    //            ('color', $type, 'light', $i),
+    //            mix($white, map.get($custom-colors, $type, 'base'), math.percentage(math.div($i, 10)))
+    //        );
+    //    }
+    //
+    //    @include set-css-var-value(
+    //        ('color', $type, 'dark', 2),
+    //        mix($black, map.get($custom-colors, $type, 'base'), math.percentage(math.div(2, 10)))
+    //    );
+    //}
+}
diff --git a/ui/src/styles/vendor.scss b/ui/src/styles/vendor.scss
index 240f72d5251..50a78332f9a 100644
--- a/ui/src/styles/vendor.scss
+++ b/ui/src/styles/vendor.scss
@@ -1,20 +1,68 @@
-@use "global" as global-var;
+@use "variable" as global-var;
 
-@use "layout/reset";
+// bootstrap
+@use "layout/bootstrap";
 
+
+// element-plus
 @forward 'element-plus/theme-chalk/src/common/var.scss' as light-* with (
-    // global one only
-    $font-family: global-var.$font-family,
+    $font-family: (
+        '':  global-var.$font-family-sans-serif,
+        'monospace': global-var.$font-family-monospace
+    ),
+
+    $font-size: (
+        'extra-large': global-var.$font-size-base * 1.5,
+        'large': global-var.$font-size-lg,
+        'medium': global-var.$font-size-base * 1.15 ,
+        'base': global-var.$font-size-base,
+        'small': global-var.$font-size-sm,
+        'extra-small': global-var.$font-size-xs,
+    ),
+
+    $colors: (
+        'white': #ffffff,
+        'black': #000000,
+        'primary': (
+            'base': global-var.$primary,
+        ),
+        'success': (
+            'base': global-var.$green,
+        ),
+        'warning': (
+            'base': global-var.$yellow,
+        ),
+        'error': (
+            'base': global-var.$red,
+        ),
+        'info': (
+            'base': global-var.$cyan,
+        ),
+    ),
 
-    // font-size everywhere
-    $font-size: global-var.$font-size,
+    $border-radius: (
+        'base': global-var.$border-radius,
+        'small': global-var.$border-radius-sm,
+        'round': global-var.$border-radius-lg,
+    ),
 );
 @use "element-plus/theme-chalk/src/index.scss";
 @use "element-plus/theme-chalk/src/dark/css-vars.scss";
 
+// vue-sidebar
+@use "~vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
+    $primary-color: global-var.$secondary,
+    $base-bg: global-var.$white,
+    $item-color: global-var.$tertiary,
+    $item-active-color: global-var.$secondary,
+    $item-font-size: global-var.$font-size-base,
+    $item-hover-color: global-var.$tertiary,
+    $item-hover-bg: darken(global-var.$secondary, 5%),
+);
 
-@use "~vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
+// third
 @import '~nprogress/nprogress.css';
 @import "~vue-material-design-icons/styles.css";
-
+//noinspection CssUnknownTarget
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700;900&display=swap");
 
diff --git a/ui/src/utils/http.js b/ui/src/utils/http.js
index 6775a345498..b6368359586 100644
--- a/ui/src/utils/http.js
+++ b/ui/src/utils/http.js
@@ -1,5 +1,8 @@
 import axios from "axios";
 import NProgress from "nprogress"
+import {ElNotification} from "element-plus"
+import {createApp} from "vue";
+import ErrorToast from "../components/ErrorToast.vue";
 
 // eslint-disable-next-line no-undef
 let root = (process.env.VUE_APP_API_URL || "") + KESTRA_BASE_PATH;
@@ -80,7 +83,7 @@ export default (callback, store, router) => {
             if (errorResponse.code && errorResponse.code === "ECONNABORTED") {
                 store.dispatch("core/showMessage", {
                     content: errorResponse,
-                    variant: "danger"
+                    variant: "error"
                 })
 
                 return Promise.reject(errorResponse);
@@ -95,7 +98,7 @@ export default (callback, store, router) => {
             if (errorResponse.response && errorResponse.response.data) {
                 store.dispatch("core/showMessage", {
                     content: errorResponse.response.data,
-                    variant: "danger"
+                    variant: "error"
                 })
 
                 return Promise.reject(errorResponse);
diff --git a/ui/src/utils/toast.js b/ui/src/utils/toast.js
index 03a5487ba94..05b92a4a219 100644
--- a/ui/src/utils/toast.js
+++ b/ui/src/utils/toast.js
@@ -1,4 +1,4 @@
-import {ElNotification, ElMessageBox, ElMessage} from "element-plus"
+import {ElNotification, ElMessageBox} from "element-plus"
 import {h} from "vue"
 
 export default {
@@ -25,39 +25,54 @@ export default {
                             cancel();
                         })
                 },
-                saved: function(name, title) {
+                saved: function(name, title, options) {
                     ElNotification({
-                        title: title || self.$t("saved"),
-                        message: this._wrap(self.$t("saved done", {name: name})),
-                        type: "success",
+                        ...{
+                            title: title || self.$t("saved"),
+                            message: this._wrap(self.$t("saved done", {name: name})),
+                            type: "success",
+                        },
+                        ...(options || {})
                     })
                 },
-                deleted: function(name, title) {
+                deleted: function(name, title, options) {
                     ElNotification({
-                        title: title || self.$t("deleted"),
-                        message: this._wrap(self.$t("deleted confirm", {name: name})),
-                        type: "success",
+                        ...{
+                            title: title || self.$t("deleted"),
+                            message: this._wrap(self.$t("deleted confirm", {name: name})),
+                            type: "success",
+                        },
+                        ...(options || {})
                     })
                 },
-                success: function(message, title) {
+                success: function(message, title, options) {
                     ElNotification({
-                        title: title || self.$t("success"),
-                        message: this._wrap(message),
-                        type: "success",
+                        ...{
+                            title: title || self.$t("success"),
+                            message: this._wrap(message),
+                            type: "success",
+                        },
+                        ...(options || {})
                     })
                 },
-                warning: function(message, title) {
+                warning: function(message, title, options) {
                     ElNotification({
-                        title: title || self.$t("warning"),
-                        message: this._wrap(message),
-                        type: "warning",
+                        ...{
+                            title: title || self.$t("warning"),
+                            message: this._wrap(message),
+                            type: "warning",
+                        },
+                        ...(options || {})
                     })
                 },
-                error: function(message, title) {
+                error: function(message, title, options) {
                     ElNotification({
-                        title: title || self.$t("error"),
-                        message: this._wrap(message),
-                        type: "danger",
+                        ...{
+                            title: title || self.$t("error"),
+                            message: this._wrap(message),
+                            type: "danger",
+                        },
+                        ...(options || {})
                     })
                 },
                 unsavedConfirm(ok, ko) {