diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index a21d20c0dac..28dce1474ec 100644
--- a/ui/src/components/inputs/Editor.vue
+++ b/ui/src/components/inputs/Editor.vue
@@ -11,7 +11,11 @@
                             transition=""
                             :hide-after="0"
                         >
-                            <el-button :icon="icon.UnfoldLessHorizontal" @click="autoFold(true)" size="small" />
+                            <el-button
+                                :icon="icon.UnfoldLessHorizontal"
+                                @click="autoFold(true)"
+                                size="small"
+                            />
                         </el-tooltip>
                         <el-tooltip
                             effect="light"
@@ -20,7 +24,11 @@
                             transition=""
                             :hide-after="0"
                         >
-                            <el-button :icon="icon.UnfoldMoreHorizontal" @click="unfoldAll" size="small" />
+                            <el-button
+                                :icon="icon.UnfoldMoreHorizontal"
+                                @click="unfoldAll"
+                                size="small"
+                            />
                         </el-tooltip>
                     </el-button-group>
                     <slot name="extends-navbar" />
@@ -61,7 +69,7 @@
 </template>
 
 <script>
-    import {defineAsyncComponent, shallowRef} from "vue"
+    import {defineAsyncComponent, shallowRef} from "vue";
     import UnfoldLessHorizontal from "vue-material-design-icons/UnfoldLessHorizontal.vue";
     import UnfoldMoreHorizontal from "vue-material-design-icons/UnfoldMoreHorizontal.vue";
     import Help from "vue-material-design-icons/Help.vue";
@@ -70,9 +78,7 @@
     import Close from "vue-material-design-icons/Close.vue";
     import {TabFocus} from "monaco-editor/esm/vs/editor/browser/config/tabFocus.js";
 
-    const MonacoEditor = defineAsyncComponent(() =>
-        import("./MonacoEditor.vue")
-    )
+    const MonacoEditor = defineAsyncComponent(() => import("./MonacoEditor.vue"));
 
     export default {
         props: {
@@ -91,12 +97,20 @@
             readOnly: {type: Boolean, default: false},
             lineNumbers: {type: Boolean, default: undefined},
             minimap: {type: Boolean, default: false},
-            creating: {type: Boolean, default: false}
+            creating: {type: Boolean, default: false},
         },
         components: {
             MonacoEditor,
         },
-        emits: ["save", "execute", "focusout", "tab", "update:modelValue", "cursor", "confirm"],
+        emits: [
+            "save",
+            "execute",
+            "focusout",
+            "tab",
+            "update:modelValue",
+            "cursor",
+            "confirm",
+        ],
         editor: undefined,
         data() {
             return {
@@ -106,7 +120,7 @@
                     UnfoldMoreHorizontal: shallowRef(UnfoldMoreHorizontal),
                     Help: shallowRef(Help),
                     BookMultipleOutline: shallowRef(BookMultipleOutline),
-                    Close: shallowRef(Close)
+                    Close: shallowRef(Close),
                 },
                 editorDocumentation: undefined,
                 plugin: undefined,
@@ -122,37 +136,49 @@
             themeComputed() {
                 const savedEditorTheme = localStorage.getItem("editorTheme");
                 return savedEditorTheme === "syncWithSystem"
-                    ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
-                    : (savedEditorTheme === "light" ? "light" : "dark");
+                    ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                        ? "dark"
+                        : "light"
+                    : savedEditorTheme === "light"
+                        ? "light"
+                        : "dark";
             },
             containerClass() {
                 return [
                     !this.input ? "" : "single-line",
                     "theme-" + this.themeComputed,
-                    this.themeComputed === "dark" ? "custom-dark-vs-theme" : ""
-                ]
+                    this.themeComputed === "dark" ? "custom-dark-vs-theme" : "",
+                ];
             },
             showPlaceholder() {
-                return this.input === true && !this.focus &&
-                    (!Object.hasOwn(this, "editor") || this.editor === undefined || !(this.editor.getValue() !== undefined && this.editor.getValue() !== ""));
+                return (
+                    this.input === true &&
+                    !this.focus &&
+                    (!Object.hasOwn(this, "editor") ||
+                        this.editor === undefined ||
+                        !(
+                            this.editor.getValue() !== undefined &&
+                            this.editor.getValue() !== ""
+                        ))
+                );
             },
             options() {
-                const options = {}
+                const options = {};
 
                 if (this.input) {
-                    options.lineNumbers = "off"
+                    options.lineNumbers = "off";
                     options.folding = false;
-                    options.renderLineHighlight = "none"
+                    options.renderLineHighlight = "none";
                     options.wordBasedSuggestions = false;
-                    options.occurrencesHighlight = false
-                    options.hideCursorInOverviewRuler = true
-                    options.overviewRulerBorder = false
-                    options.overviewRulerLanes = 0
+                    options.occurrencesHighlight = false;
+                    options.hideCursorInOverviewRuler = true;
+                    options.overviewRulerBorder = false;
+                    options.overviewRulerLanes = 0;
                     options.lineNumbersMinChars = 0;
                     options.fontSize = 13;
                     options.minimap = {
-                        enabled: false
-                    }
+                        enabled: false,
+                    };
                     options.scrollBeyondLastColumn = 0;
                     options.overviewRulerLanes = 0;
                     options.scrollbar = {
@@ -165,13 +191,13 @@
                         useShadows: false,
                     };
                     options.stickyScroll = {
-                        enabled: false
+                        enabled: false,
                     };
                     options.find = {
                         addExtraSpaceOnTop: false,
                         autoFindInSelection: "never",
                         seedSearchStringFromSelection: false,
-                    }
+                    };
                     options.contextmenu = false;
                     options.lineDecorationsWidth = 0;
                 } else {
@@ -180,38 +206,43 @@
                         verticalScrollbarSize: this.original !== undefined ? 0 : 10,
                         alwaysConsumeMouseWheel: false,
                     };
-                    options.renderSideBySide = this.diffSideBySide
+                    options.renderSideBySide = this.diffSideBySide;
                 }
 
                 if (this.minimap === false) {
                     options.minimap = {
-                        enabled: false
-
-                    }
+                        enabled: false,
+                    };
                 }
 
                 if (this.readOnly) {
-                    options.readOnly = true
+                    options.readOnly = true;
                 }
 
-                options.wordWrap = true
+                options.wordWrap = true;
                 options.automaticLayout = true;
 
                 return {
                     ...{
                         tabSize: 2,
-                        fontFamily: localStorage.getItem("editorFontFamily") ? localStorage.getItem("editorFontFamily") : "'Source Code Pro', monospace",
-                        fontSize: localStorage.getItem("editorFontSize") ? parseInt(localStorage.getItem("editorFontSize")) : 12,
+                        fontFamily: localStorage.getItem("editorFontFamily")
+                            ? localStorage.getItem("editorFontFamily")
+                            : "'Source Code Pro', monospace",
+                        fontSize: localStorage.getItem("editorFontSize")
+                            ? parseInt(localStorage.getItem("editorFontSize"))
+                            : 12,
                         showFoldingControls: "always",
                         scrollBeyondLastLine: false,
                         roundedSelection: false,
                     },
-                    ...options
+                    ...options,
                 };
-            }
+            },
         },
         created() {
-            this.editorDocumentation = localStorage.getItem("editorDocumentation") !== "false" && this.navbar;
+            this.editorDocumentation =
+                localStorage.getItem("editorDocumentation") !== "false" &&
+                this.navbar;
         },
         methods: {
             editorDidMount(editor) {
@@ -227,11 +258,11 @@
                     this.editor.onDidBlurEditorWidget?.(() => {
                         this.$emit("focusout", editor.getValue());
                         this.focus = false;
-                    })
+                    });
 
                     this.editor.onDidFocusEditorText?.(() => {
                         this.focus = true;
-                    })
+                    });
 
                     this.$refs.monacoEditor.focus();
                 }
@@ -240,59 +271,55 @@
                     this.editor.addAction({
                         id: "kestra-save",
                         label: "Save",
-                        keybindings: [
-                            KeyMod.CtrlCmd | KeyCode.KeyS,
-                        ],
+                        keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS],
                         contextMenuGroupId: "navigation",
                         contextMenuOrder: 1.5,
                         run: (ed) => {
-                            this.$emit("save", ed.getValue())
-                        }
+                            this.$emit("save", ed.getValue());
+                        },
                     });
-                }
-                else {
+                } else {
                     if (this.lang === "json") {
-                        editor.getAction("editor.action.formatDocument").run()
+                        editor.getAction("editor.action.formatDocument").run();
                     }
                 }
 
                 this.editor.addAction({
                     id: "kestra-execute",
                     label: "Execute the flow",
-                    keybindings: [
-                        KeyMod.CtrlCmd | KeyCode.KeyE,
-                    ],
+                    keybindings: [KeyMod.CtrlCmd | KeyCode.KeyE],
                     contextMenuGroupId: "navigation",
                     contextMenuOrder: 1.5,
                     run: (ed) => {
-                        this.$emit("execute", ed.getValue())
-                    }
+                        this.$emit("execute", ed.getValue());
+                    },
                 });
 
                 this.editor.addAction({
                     id: "confirm",
                     label: "Confirm",
-                    keybindings: [
-                        KeyMod.CtrlCmd | KeyCode.Enter,
-                    ],
+                    keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
                     contextMenuGroupId: "navigation",
                     contextMenuOrder: 1.5,
                     run: (ed) => {
-                        this.$emit("confirm", ed.getValue())
-                    }
+                        this.$emit("confirm", ed.getValue());
+                    },
                 });
 
                 // TabFocus is global to all editor so revert the behavior on non inputs
                 this.editor.onDidFocusEditorText?.(() => {
                     TabFocus.setTabFocusMode(this.input);
-                })
+                });
 
                 if (this.input) {
                     this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyH, () => {});
                     this.editor.addCommand(KeyCode.F1, () => {});
 
                     if (!this.readOnly) {
-                        this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyF, () => { });
+                        this.editor.addCommand(
+                            KeyMod.CtrlCmd | KeyCode.KeyF,
+                            () => {},
+                        );
                     }
                 }
 
@@ -300,32 +327,39 @@
                     this.editor.addAction({
                         id: "fold-multiline",
                         label: "Fold All Multi Lines",
-                        keybindings: [
-                            KeyCode.F10,
-                        ],
+                        keybindings: [KeyCode.F10],
                         contextMenuGroupId: "fold",
                         contextMenuOrder: 1.5,
                         run: (ed) => {
-                            const foldingContrib = ed.getContribution("editor.contrib.folding");
-                            foldingContrib.getFoldingModel().then(foldingModel => {
-
-                                let editorModel = foldingModel.textModel;
-                                let regions = foldingModel.regions;
-                                let toToggle = [];
-                                for (let i = regions.length - 1; i >= 0; i--) {
-                                    if (regions.isCollapsed(i) === false) {
-                                        let startLineNumber = regions.getStartLineNumber(i);
-
-                                        if (editorModel.getLineContent(startLineNumber).trim().endsWith("|")) {
-                                            toToggle.push(regions.toRegion(i));
+                            const foldingContrib = ed.getContribution(
+                                "editor.contrib.folding",
+                            );
+                            foldingContrib
+                                .getFoldingModel()
+                                .then((foldingModel) => {
+                                    let editorModel = foldingModel.textModel;
+                                    let regions = foldingModel.regions;
+                                    let toToggle = [];
+                                    for (let i = regions.length - 1; i >= 0; i--) {
+                                        if (regions.isCollapsed(i) === false) {
+                                            let startLineNumber =
+                                                regions.getStartLineNumber(i);
+
+                                            if (
+                                                editorModel
+                                                    .getLineContent(startLineNumber)
+                                                    .trim()
+                                                    .endsWith("|")
+                                            ) {
+                                                toToggle.push(regions.toRegion(i));
+                                            }
                                         }
                                     }
-                                }
-                                foldingModel.toggleCollapseState(toToggle);
-                            });
+                                    foldingModel.toggleCollapseState(toToggle);
+                                });
 
                             return null;
-                        }
+                        },
                     });
 
                     if (localStorage.getItem("autofoldTextEditor") === "1") {
@@ -334,26 +368,29 @@
                 }
 
                 if (this.original !== undefined) {
-                    this.editor.updateOptions({readOnly: true})
+                    this.editor.updateOptions({readOnly: true});
                 }
 
                 if (!this.fullHeight) {
-                    editor.onDidContentSizeChange(e => {
-                        if(!this.$refs.container) return;
-                        this.$refs.container.style.height = (e.contentHeight + this.customHeight) + "px";
+                    editor.onDidContentSizeChange((e) => {
+                        if (!this.$refs.container) return;
+                        this.$refs.container.style.height =
+                            e.contentHeight + this.customHeight + "px";
                     });
                 }
 
                 if (!this.original) {
-                    this.editor.onDidContentSizeChange(_ => {
+                    this.editor.onDidContentSizeChange((_) => {
                         if (this.guidedProperties.monacoRange) {
-                            editor.revealLine(this.guidedProperties.monacoRange.endLineNumber);
+                            editor.revealLine(
+                                this.guidedProperties.monacoRange.endLineNumber,
+                            );
                             const decorationsToAdd = [];
                             decorationsToAdd.push({
                                 range: this.guidedProperties.monacoRange,
                                 options: {
                                     isWholeLine: true,
-                                    inlineClassName: "highlight-text"
+                                    inlineClassName: "highlight-text",
                                 },
                                 className: "highlight-text",
                             });
@@ -362,7 +399,7 @@
                                     range: this.guidedProperties.monacoDisableRange,
                                     options: {
                                         isWholeLine: true,
-                                        inlineClassName: "disable-text"
+                                        inlineClassName: "disable-text",
                                     },
                                     className: "disable-text",
                                 });
@@ -379,7 +416,10 @@
                         let model = this.editor.getModel();
                         clearTimeout(this.lastTimeout);
                         this.lastTimeout = setTimeout(() => {
-                            this.$emit("cursor", {position: position, model: model})
+                            this.$emit("cursor", {
+                                position: position,
+                                model: model,
+                            });
                         }, 100);
                         this.highlightPebble();
                     });
@@ -389,7 +429,7 @@
                 // the value of the editor without dealing with how Monaco handles the exact keystrokes
                 this.$refs.monacoEditor.$el.__setValueInTests = (value) => {
                     this.editor.setValue(value);
-                }
+                };
             },
             autoFold(autoFold) {
                 if (autoFold) {
@@ -403,8 +443,8 @@
                 this.$emit("update:modelValue", value);
             },
             onPlaceholderClick() {
-                this.editor.layout()
-                this.editor.focus()
+                this.editor.layout();
+                this.editor.focus();
             },
             highlightPebble() {
                 // Highlight code that match pebble content
@@ -421,11 +461,11 @@
                             startLineNumber: startPos.lineNumber,
                             startColumn: startPos.column,
                             endLineNumber: endPos.lineNumber,
-                            endColumn: endPos.column
+                            endColumn: endPos.column,
                         },
                         options: {
-                            inlineClassName: "highlight-pebble"
-                        }
+                            inlineClassName: "highlight-pebble",
+                        },
                     });
                 }
                 this.decorations.set(decorationsToAdd);
@@ -435,154 +475,162 @@
 </script>
 
 <style lang="scss">
-    @import "../../styles/layout/root-dark.scss";
-    @import "../../styles/color-palette.scss";
+@import "@kestra-io/ui-libs/src/scss/color-palette.scss";
+@import "../../styles/layout/root-dark.scss";
 
-    :not(.namespace-form, .el-drawer__body) > .ks-editor{
-        flex-direction: column;
-        height: 100%;
-    }
+:not(.namespace-form, .el-drawer__body) > .ks-editor {
+    flex-direction: column;
+    height: 100%;
+}
 
-    .el-form .ks-editor {
-        display: flex;
-        width: 100%;
-    }
+.el-form .ks-editor {
+    display: flex;
+    width: 100%;
+}
 
-    .ks-editor {
-        display: flex;
+.ks-editor {
+    display: flex;
 
-        .top-nav {
-            background-color: var(--ks-background-card);
-            padding: .5rem;
-            border-radius: var(--bs-border-radius-lg);
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+    .top-nav {
+        background-color: var(--ks-background-card);
+        padding: 0.5rem;
+        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);
-            }
+        html.dark & {
+            background-color: var(--bs-gray-100);
         }
+    }
 
-        .editor-container {
-            display: flex;
-            flex-grow: 1;
-
-            &.single-line {
-                min-height: var(--el-component-size);
-                padding: 1px 11px;
-                background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
-                border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
-                transition: var(--el-transition-box-shadow);
-                box-shadow: 0 0 0 1px var(--ks-border-primary) inset;
-                padding-top: 7px;
-
-                &.custom-dark-vs-theme {
-                    background-color: $input-bg;
-                }
-
-                &.theme-light{
-                    background-color: $base-white;
-                }
+    .editor-container {
+        display: flex;
+        flex-grow: 1;
+
+        &.single-line {
+            min-height: var(--el-component-size);
+            padding: 1px 11px;
+            background-color: var(
+                --el-input-bg-color,
+                var(--el-fill-color-blank)
+            );
+            border-radius: var(
+                --el-input-border-radius,
+                var(--el-border-radius-base)
+            );
+            transition: var(--el-transition-box-shadow);
+            box-shadow: 0 0 0 1px var(--ks-border-primary) inset;
+            padding-top: 7px;
+
+            &.custom-dark-vs-theme {
+                background-color: $input-bg;
             }
 
-            .placeholder {
-                position: absolute;
-                top: -3px;
-                overflow: hidden;
-                padding-left: inherit;
-                padding-right: inherit;
-                cursor: text;
-                user-select: none;
-                color: var(--ks-content-inactive);
+            &.theme-light {
+                background-color: $base-white;
             }
+        }
 
-            .editor-wrapper {
-                min-width: 75%;
-                width: 100%;
+        .placeholder {
+            position: absolute;
+            top: -3px;
+            overflow: hidden;
+            padding-left: inherit;
+            padding-right: inherit;
+            cursor: text;
+            user-select: none;
+            color: var(--ks-content-inactive);
+        }
 
-                .monaco-hover-content {
-                    h4 {
-                        font-size: var(--font-size-base);
-                        font-weight: bold;
-                        line-height: var(--bs-body-line-height);
-                    }
+        .editor-wrapper {
+            min-width: 75%;
+            width: 100%;
 
-                    p {
-                        margin-bottom: .5rem;
+            .monaco-hover-content {
+                h4 {
+                    font-size: var(--font-size-base);
+                    font-weight: bold;
+                    line-height: var(--bs-body-line-height);
+                }
 
-                        &:last-child {
-                            display: none;
-                        }
-                    }
+                p {
+                    margin-bottom: 0.5rem;
 
-                    *:nth-last-child(2n) {
-                        margin-bottom: 0;
+                    &:last-child {
+                        display: none;
                     }
                 }
-            }
 
-            .bottom-right {
-                bottom: 0px;
-                right: 0px;
-
-                ul {
-                    display: flex;
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-                    //gap: .5rem;
+                *:nth-last-child(2n) {
+                    margin-bottom: 0;
                 }
             }
         }
-    }
 
-    .custom-dark-vs-theme {
-        .monaco-editor, .monaco-editor-background {
-            outline: none;
-            background-color: $input-bg;
-            --vscode-editor-background: $input-bg;
-            --vscode-breadcrumb-background: $input-bg;
-            --vscode-editorGutter-background: $input-bg;
-        }
+        .bottom-right {
+            bottom: 0px;
+            right: 0px;
 
-        .monaco-editor .margin {
-            background-color: $input-bg;
+            ul {
+                display: flex;
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                //gap: .5rem;
+            }
         }
     }
+}
+
+.custom-dark-vs-theme {
+    .monaco-editor,
+    .monaco-editor-background {
+        outline: none;
+        background-color: $input-bg;
+        --vscode-editor-background: $input-bg;
+        --vscode-breadcrumb-background: $input-bg;
+        --vscode-editorGutter-background: $input-bg;
+    }
 
-    .highlight-text {
-        cursor: pointer;
-        font-weight: 700;
-        box-shadow: 0 19px 44px rgba(157, 29, 236, 0.31);
-
-        html.dark & {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
+    .monaco-editor .margin {
+        background-color: $input-bg;
     }
+}
 
-    .highlight-pebble {
-        color: #977100 !important;
+.highlight-text {
+    cursor: pointer;
+    font-weight: 700;
+    box-shadow: 0 19px 44px rgba(157, 29, 236, 0.31);
 
-        html.dark & {
-            color: #ffca16 !important;
-        }
+    html.dark & {
+        background-color: rgba(255, 255, 255, 0.2);
     }
+}
 
-    .disable-text {
-        color: grey !important;
+.highlight-pebble {
+    color: #977100 !important;
+
+    html.dark & {
+        color: #ffca16 !important;
     }
+}
 
-    div.img {
-        min-height: 130px;
-        height: 100%;
+.disable-text {
+    color: grey !important;
+}
 
-        &.get-started {
-            background: url("../../assets/onboarding/onboarding-doc-light.svg") no-repeat center;
+div.img {
+    min-height: 130px;
+    height: 100%;
 
-            html.dark & {
-                background: url("../../assets/onboarding/onboarding-doc-dark.svg") no-repeat center;
-            }
+    &.get-started {
+        background: url("../../assets/onboarding/onboarding-doc-light.svg")
+            no-repeat center;
+
+        html.dark & {
+            background: url("../../assets/onboarding/onboarding-doc-dark.svg")
+                no-repeat center;
         }
     }
-
+}
 </style>
diff --git a/ui/src/components/namespace/Namespaces.vue b/ui/src/components/namespace/Namespaces.vue
index 8347963a9d3..4231cca40a5 100644
--- a/ui/src/components/namespace/Namespaces.vue
+++ b/ui/src/components/namespace/Namespaces.vue
@@ -139,7 +139,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/color-palette.scss";
+@import "@kestra-io/ui-libs/src/scss/color-palette.scss";
 
 .filter {
     min-width: 200px;
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 082d21ba845..d007755d38e 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -1,7 +1,7 @@
 @use "@kestra-io/ui-libs/src/scss/variables.scss" as global-var;
 @use 'element-plus/theme-chalk/src/mixins/mixins' as mixin;
 
-@use "@kestra-io/ui-libs/src/scss/app.scss";
+@use "@kestra-io/ui-libs/style.css";
 
 // element-plus
 @use "layout/element-plus-overload";
@@ -14,9 +14,6 @@
 @use "layout/root-dark";
 @use "layout/html-tag" as *;
 
-@use "layout/theme-light";
-@use "layout/theme-dark";
-
 // components
 @use "layout/charts";
 @use "components/vue-material-design-icon";
diff --git a/ui/src/styles/color-palette.scss b/ui/src/styles/color-palette.scss
deleted file mode 100644
index 2c6c69317e0..00000000000
--- a/ui/src/styles/color-palette.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-$base-blue-100: #a2cdff;
-$base-blue-200: #7fbbff;
-$base-blue-300: #5bb8ff;
-$base-blue-400: #3991ff;
-$base-blue-50: #c7fdff;
-$base-blue-500: #1761fd;
-$base-blue-600: #134ecc;
-$base-blue-700: #0e3b9a;
-$base-blue-800: #0a2869;
-$base-blue-900: #051538;
-$base-green-100: #beefe2;
-$base-green-200: #7cdfc4;
-$base-green-300: #21ce9c;
-$base-green-400: #02be8a;
-$base-green-50: #e4f9f3;
-$base-green-500: #029e73;
-$base-green-600: #017f5c;
-$base-green-700: #016046;
-$base-green-800: #014230;
-$base-green-900: #002319;
-$base-black: #060709;
-$base-gray-100: #cfd3d6;
-$base-gray-200: #ecebef;
-$base-gray-300: #9797a6;
-$base-gray-400: #404559;
-$base-gray-50: #f9f9fa;
-$base-gray-500: #2f3342;
-$base-gray-600: #2c303f;
-$base-gray-700: #21242e;
-$base-gray-800: #21242e;
-$base-gray-900: #1c1e27;
-$base-gray-950: #060709;
-$base-white: #ffffff;
-$base-orange-100: #f3c4a1;
-$base-orange-200: #eeae7e;
-$base-orange-300: #e9985b;
-$base-orange-400: #e58238;
-$base-orange-50: #fff2ea;
-$base-orange-500: #dd5f00;
-$base-orange-600: #c15300;
-$base-orange-700: #a64700;
-$base-orange-800: #8a3b00;
-$base-orange-900: #6f3000;
-$base-purple-100: #bbbbff;
-$base-purple-200: #a396ff;
-$base-purple-300: #9470ff;
-$base-purple-400: #8c4bff;
-$base-purple-50: #e0e0ff;
-$base-purple-500: #8405ff;
-$base-purple-600: #7400df;
-$base-purple-700: #6300bf;
-$base-purple-800: #53009f;
-$base-purple-900: #420080;
-$base-red-100: #fec9cb;
-$base-red-200: #fd9297;
-$base-red-300: #fd7278;
-$base-red-400: #e3262f;
-$base-red-50: #fff2f3;
-$base-red-500: #ab0009;
-$base-red-600: #870007;
-$base-red-700: #5a0005;
-$base-red-800: #470004;
-$base-red-900: #260002;
-$base-yellow-100: #fdedb3;
-$base-yellow-200: #fdeaa8;
-$base-yellow-300: #fde89d;
-$base-yellow-400: #fde592;
-$base-yellow-50: #fffbef;
-$base-yellow-500: #fce07c;
-$base-yellow-600: #ddc46d;
-$base-yellow-700: #bda85d;
-$base-yellow-800: #9e8c4e;
-$base-yellow-900: #7e703e;
\ No newline at end of file
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
index ec07510825d..58dce224135 100644
--- a/ui/src/styles/layout/element-plus-overload.scss
+++ b/ui/src/styles/layout/element-plus-overload.scss
@@ -2,7 +2,7 @@
 @use "sass:map";
 @use 'element-plus/theme-chalk/src/mixins/mixins' as *;
 @import "@kestra-io/ui-libs/src/scss/variables.scss";
-@import "../color-palette.scss";
+@import "@kestra-io/ui-libs/src/scss/color-palette.scss";
 
 // button
 .el-button {
diff --git a/ui/src/styles/layout/root.scss b/ui/src/styles/layout/root.scss
index 52e1130c516..fb1df71110a 100644
--- a/ui/src/styles/layout/root.scss
+++ b/ui/src/styles/layout/root.scss
@@ -3,7 +3,7 @@
 @use 'element-plus/theme-chalk/src/mixins/var' as *;
 
 @import "@kestra-io/ui-libs/src/scss/variables.scss";
-@import "../color-palette.scss";
+@import "@kestra-io/ui-libs/src/scss/color-palette.scss";
 
 // use bootstrap for main style
 :root {
diff --git a/ui/src/styles/layout/theme-dark.scss b/ui/src/styles/layout/theme-dark.scss
deleted file mode 100644
index 23e5457171f..00000000000
--- a/ui/src/styles/layout/theme-dark.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@import "../color-palette.scss";
-
-html.dark{
-	/* background */
-	#{--ks-background-body}: $base-gray-800;
-	#{--ks-background-cancelled}: #d1cfe933;
-	#{--ks-background-card}: $base-gray-500;
-	#{--ks-background-card-opacity}: #121319e5;
-	#{--ks-background-created}: rgba($base-red-200, 0.2);
-	#{--ks-background-error}: rgba($base-red-900, 0.2);
-	#{--ks-background-info}: rgba($base-blue-700, 0.2);
-	#{--ks-background-input}: $base-gray-900;
-	#{--ks-background-killed}: $base-gray-500;
-	#{--ks-background-killing}: $base-gray-600;
-	#{--ks-background-left-menu}: $base-gray-900;
-	#{--ks-background-logo}: #2c005900;
-	#{--ks-background-paused}: rgba($base-yellow-900, 0.2);
-	#{--ks-background-queued}: rgba($base-yellow-900, 0.2);
-	#{--ks-background-restarted}: rgba($base-blue-300, 0.2);
-	#{--ks-background-retried}: #578dff33;
-	#{--ks-background-retrying}: rgba($base-blue-500, 0.2);
-	#{--ks-background-running}: rgba($base-blue-500, 0.2);
-	#{--ks-background-success}: rgba($base-green-900, 0.2);
-	#{--ks-background-table-header}: $base-gray-600;
-	#{--ks-background-table-row}: $base-gray-400;
-	#{--ks-background-table-row-hover}: #2f3342;
-	#{--ks-background-tag}: $base-gray-400;
-	#{--ks-background-warning}: rgba($base-orange-900, 0.2);
-
-	/* badge */
-	#{--ks-badge-background}: rgba($base-blue-300, 0.2);
-	#{--ks-badge-border}: $base-blue-300;
-	#{--ks-badge-content}: $base-blue-100;
-
-	/* border */
-	#{--ks-border-active}: $base-purple-500;
-	#{--ks-border-cancelled}: $base-gray-700;
-	#{--ks-border-created}: $base-red-200;
-	#{--ks-border-error}: $base-red-400;
-	#{--ks-border-inactive}: $base-gray-400;
-	#{--ks-border-info}: $base-blue-500;
-	#{--ks-border-killed}: $base-gray-700;
-	#{--ks-border-killing}: $base-gray-700;
-	#{--ks-border-paused}: $base-yellow-200;
-	#{--ks-border-primary}: $base-gray-400;
-	#{--ks-border-queued}: $base-yellow-900;
-	#{--ks-border-restarted}: $base-blue-50;
-	#{--ks-border-retried}: $base-blue-100;
-	#{--ks-border-retrying}: $base-blue-200;
-	#{--ks-border-running}: $base-blue-400;
-	#{--ks-border-secondary}: $base-gray-500;
-	#{--ks-border-success}: $base-green-400;
-	#{--ks-border-system}: $base-blue-300;
-	#{--ks-border-warning}: $base-orange-300;
-
-	/* button */
-	#{--ks-button-background-inactive}: $base-gray-600;
-	#{--ks-button-background-primary}: $base-purple-500;
-	#{--ks-button-background-primary-active}: $base-purple-600;
-	#{--ks-button-background-primary-hover}: $base-purple-400;
-	#{--ks-button-background-secondary}: $base-gray-500;
-	#{--ks-button-background-secondary-active}: $base-gray-700;
-	#{--ks-button-background-secondary-hover}: $base-gray-400;
-	#{--ks-button-background-success}: $base-green-400;
-	#{--ks-button-background-success-active}: $base-green-500;
-	#{--ks-button-background-success-hover}: $base-green-300;
-	#{--ks-button-content-primary}: $base-white;
-
-	/* chart */
-	#{--ks-chart-cancelled}: $base-gray-700;
-	#{--ks-chart-created}: $base-red-100;
-	#{--ks-chart-failed}: $base-red-300;
-	#{--ks-chart-killed}: $base-gray-800;
-	#{--ks-chart-killing}: $base-gray-600;
-	#{--ks-chart-paused}: $base-yellow-300;
-	#{--ks-chart-queued}: $base-yellow-700;
-	#{--ks-chart-restarted}: $base-blue-50;
-	#{--ks-chart-retried}: $base-blue-100;
-	#{--ks-chart-retrying}: $base-blue-200;
-	#{--ks-chart-running}: $base-blue-300;
-	#{--ks-chart-success}: $base-green-300;
-	#{--ks-chart-warning}: $base-orange-200;
-
-	/* content */
-	#{--ks-content-alert}: $base-red-300;
-	#{--ks-content-cancelled}: $base-gray-900;
-	#{--ks-content-created}: $base-red-50;
-	#{--ks-content-error}: $base-red-200;
-	#{--ks-content-id}: $base-purple-100;
-	#{--ks-content-inactive}: $base-gray-300;
-	#{--ks-content-info}: $base-blue-50;
-	#{--ks-content-inverse}: $base-black;
-	#{--ks-content-killed}: $base-white;
-	#{--ks-content-killing}: $base-white;
-	#{--ks-content-link}: $base-purple-100;
-	#{--ks-content-link-hover}: $base-purple-50;
-	#{--ks-content-paused}: $base-yellow-50;
-	#{--ks-content-primary}: $base-white;
-	#{--ks-content-queued}: $base-yellow-200;
-	#{--ks-content-restarted}: $base-blue-200;
-	#{--ks-content-retried}: $base-blue-50;
-	#{--ks-content-retrying}: $base-blue-50;
-	#{--ks-content-running}: $base-blue-200;
-	#{--ks-content-secondary}: $base-gray-200;
-	#{--ks-content-success}: $base-green-100;
-	#{--ks-content-tertiary}: $base-gray-300;
-	#{--ks-content-warning}: $base-orange-50;
-
-	/* dialog */
-	#{--ks-dialog-background}: $base-gray-500;
-	#{--ks-dialog-border}: $base-gray-400;
-	#{--ks-dialog-header}: $base-gray-500;
-	#{--ks-dialog-headerbtn}: $base-gray-300;
-	#{--ks-dialog-headerbtn-hover}: $base-purple-200;
-
-	/* editor */
-	#{--ks-editor-number}: $base-orange-100;
-	#{--ks-editor-pabble}: $base-orange-50;
-	#{--ks-editor-property}: $base-green-200;
-	#{--ks-editor-punctuation}: $base-gray-300;
-	#{--ks-editor-value}: $base-blue-300;
-
-	/* log */
-	#{--ks-log-background-debug}: rgba($base-blue-300, 0.2);
-	#{--ks-log-background-error}: rgba($base-red-300, 0.2);
-	#{--ks-log-background-info}: rgba($base-blue-700, 0.2);
-	#{--ks-log-background-trace}: #d1cfe933;
-	#{--ks-log-background-warn}: rgba($base-orange-400, 0.2);
-	#{--ks-log-border-debug}: $base-blue-300;
-	#{--ks-log-border-error}: $base-red-300;
-	#{--ks-log-border-info}: $base-blue-500;
-	#{--ks-log-border-trace}: $base-gray-700;
-	#{--ks-log-border-warn}: $base-orange-300;
-	#{--ks-log-chart-debug}: $base-blue-400;
-	#{--ks-log-chart-error}: $base-red-300;
-	#{--ks-log-chart-info}: $base-blue-500;
-	#{--ks-log-chart-log-warn}: $base-orange-100;
-	#{--ks-log-chart-trace}: $base-gray-700;
-	#{--ks-log-content-debug}: $base-blue-100;
-	#{--ks-log-content-error}: $base-red-100;
-	#{--ks-log-content-info}: $base-blue-50;
-	#{--ks-log-content-trace}: $base-gray-900;
-	#{--ks-log-content-warn}: $base-orange-50;
-
-	/* select */
-	#{--ks-select-active}: $base-gray-900;
-	#{--ks-select-active-icon}: $base-purple-100;
-	#{--ks-select-background}: $base-gray-800;
-	#{--ks-select-border}: $base-gray-400;
-	#{--ks-select-hover}: $base-gray-600;
-
-	/* tag */
-	#{--ks-tag-background}: $base-gray-500;
-	#{--ks-tag-background-hover}: $base-gray-400;
-	#{--ks-tag-content}: $base-white;
-
-	/* tooltip */
-	#{--ks-tooltip-background}: $base-gray-700;
-	#{--ks-tooltip-border}: $base-gray-400;
-}
\ No newline at end of file
diff --git a/ui/src/styles/layout/theme-light.scss b/ui/src/styles/layout/theme-light.scss
deleted file mode 100644
index 178c265c8e7..00000000000
--- a/ui/src/styles/layout/theme-light.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@import "../color-palette.scss";
-
-:root{
-	/* background */
-	#{--ks-background-body}: $base-gray-50;
-	#{--ks-background-cancelled}: $base-gray-300;
-	#{--ks-background-card}: $base-white;
-	#{--ks-background-card-opacity}: #1b1c23e5;
-	#{--ks-background-created}: $base-red-50;
-	#{--ks-background-error}: $base-red-50;
-	#{--ks-background-info}: #c7f0ff;
-	#{--ks-background-input}: $base-white;
-	#{--ks-background-killed}: $base-gray-50;
-	#{--ks-background-killing}: $base-gray-200;
-	#{--ks-background-left-menu}: $base-white;
-	#{--ks-background-logo}: #2c0059;
-	#{--ks-background-paused}: $base-yellow-50;
-	#{--ks-background-queued}: $base-yellow-50;
-	#{--ks-background-restarted}: $base-blue-50;
-	#{--ks-background-retried}: $base-blue-50;
-	#{--ks-background-retrying}: $base-blue-50;
-	#{--ks-background-running}: $base-blue-50;
-	#{--ks-background-success}: $base-green-50;
-	#{--ks-background-table-header}: $base-gray-50;
-	#{--ks-background-table-row}: $base-gray-100;
-	#{--ks-background-table-row-hover}: $base-white;
-	#{--ks-background-tag}: $base-gray-200;
-	#{--ks-background-warning}: $base-orange-50;
-
-	/* badge */
-	#{--ks-badge-background}: $base-blue-50;
-	#{--ks-badge-border}: $base-blue-400;
-	#{--ks-badge-content}: $base-blue-600;
-
-	/* border */
-	#{--ks-border-active}: $base-purple-500;
-	#{--ks-border-cancelled}: $base-gray-500;
-	#{--ks-border-created}: $base-red-200;
-	#{--ks-border-error}: $base-red-300;
-	#{--ks-border-inactive}: $base-gray-100;
-	#{--ks-border-info}: $base-blue-200;
-	#{--ks-border-killed}: $base-gray-400;
-	#{--ks-border-killing}: $base-gray-400;
-	#{--ks-border-paused}: $base-yellow-600;
-	#{--ks-border-primary}: $base-gray-200;
-	#{--ks-border-queued}: $base-yellow-600;
-	#{--ks-border-restarted}: $base-blue-100;
-	#{--ks-border-retried}: $base-blue-300;
-	#{--ks-border-retrying}: $base-blue-500;
-	#{--ks-border-running}: $base-blue-400;
-	#{--ks-border-secondary}: $base-gray-100;
-	#{--ks-border-success}: $base-green-300;
-	#{--ks-border-system}: $base-blue-400;
-	#{--ks-border-warning}: $base-orange-300;
-
-	/* button */
-	#{--ks-button-background-inactive}: $base-gray-50;
-	#{--ks-button-background-primary}: $base-purple-500;
-	#{--ks-button-background-primary-active}: $base-purple-600;
-	#{--ks-button-background-primary-hover}: $base-purple-400;
-	#{--ks-button-background-secondary}: $base-white;
-	#{--ks-button-background-secondary-active}: $base-gray-100;
-	#{--ks-button-background-secondary-hover}: $base-gray-50;
-	#{--ks-button-background-success}: $base-green-500;
-	#{--ks-button-background-success-active}: $base-green-600;
-	#{--ks-button-background-success-hover}: $base-green-400;
-	#{--ks-button-content-primary}: $base-white;
-
-	/* chart */
-	#{--ks-chart-cancelled}: $base-gray-400;
-	#{--ks-chart-created}: $base-red-100;
-	#{--ks-chart-failed}: $base-red-300;
-	#{--ks-chart-killed}: $base-gray-300;
-	#{--ks-chart-killing}: $base-gray-400;
-	#{--ks-chart-paused}: $base-yellow-500;
-	#{--ks-chart-queued}: $base-yellow-100;
-	#{--ks-chart-restarted}: $base-blue-50;
-	#{--ks-chart-retried}: $base-blue-100;
-	#{--ks-chart-retrying}: $base-blue-200;
-	#{--ks-chart-running}: $base-blue-300;
-	#{--ks-chart-success}: $base-green-400;
-	#{--ks-chart-warning}: $base-orange-300;
-
-	/* content */
-	#{--ks-content-alert}: $base-red-500;
-	#{--ks-content-cancelled}: $base-black;
-	#{--ks-content-created}: $base-red-400;
-	#{--ks-content-error}: $base-red-500;
-	#{--ks-content-id}: $base-purple-500;
-	#{--ks-content-inactive}: $base-gray-300;
-	#{--ks-content-info}: $base-blue-600;
-	#{--ks-content-inverse}: $base-white;
-	#{--ks-content-killed}: $base-black;
-	#{--ks-content-killing}: $base-gray-900;
-	#{--ks-content-link}: $base-purple-500;
-	#{--ks-content-link-hover}: $base-purple-300;
-	#{--ks-content-paused}: $base-orange-500;
-	#{--ks-content-primary}: $base-black;
-	#{--ks-content-queued}: $base-yellow-800;
-	#{--ks-content-restarted}: $base-blue-600;
-	#{--ks-content-retried}: $base-blue-600;
-	#{--ks-content-retrying}: $base-blue-700;
-	#{--ks-content-running}: $base-blue-600;
-	#{--ks-content-secondary}: $base-gray-700;
-	#{--ks-content-success}: $base-green-700;
-	#{--ks-content-tertiary}: $base-gray-500;
-	#{--ks-content-warning}: $base-orange-500;
-
-	/* dialog */
-	#{--ks-dialog-background}: $base-white;
-	#{--ks-dialog-border}: $base-gray-200;
-	#{--ks-dialog-header}: $base-white;
-	#{--ks-dialog-headerbtn}: $base-gray-300;
-	#{--ks-dialog-headerbtn-hover}: $base-purple-300;
-
-	/* editor */
-	#{--ks-editor-number}: $base-orange-600;
-	#{--ks-editor-pabble}: $base-orange-400;
-	#{--ks-editor-property}: $base-green-600;
-	#{--ks-editor-punctuation}: $base-gray-400;
-	#{--ks-editor-value}: $base-blue-600;
-
-	/* log */
-	#{--ks-log-background-debug}: $base-blue-50;
-	#{--ks-log-background-error}: $base-red-50;
-	#{--ks-log-background-info}: #c7f0ff;
-	#{--ks-log-background-trace}: $base-gray-300;
-	#{--ks-log-background-warn}: $base-orange-50;
-	#{--ks-log-border-debug}: $base-blue-400;
-	#{--ks-log-border-error}: $base-red-400;
-	#{--ks-log-border-info}: $base-blue-200;
-	#{--ks-log-border-trace}: $base-gray-500;
-	#{--ks-log-border-warn}: $base-orange-400;
-	#{--ks-log-chart-debug}: $base-blue-200;
-	#{--ks-log-chart-error}: $base-red-300;
-	#{--ks-log-chart-info}: $base-blue-300;
-	#{--ks-log-chart-log-warn}: $base-orange-200;
-	#{--ks-log-chart-trace}: $base-gray-400;
-	#{--ks-log-content-debug}: $base-blue-600;
-	#{--ks-log-content-error}: $base-red-500;
-	#{--ks-log-content-info}: $base-blue-600;
-	#{--ks-log-content-trace}: $base-black;
-	#{--ks-log-content-warn}: $base-orange-800;
-
-	/* select */
-	#{--ks-select-active}: $base-gray-50;
-	#{--ks-select-active-icon}: $base-purple-500;
-	#{--ks-select-background}: $base-white;
-	#{--ks-select-border}: $base-gray-200;
-	#{--ks-select-hover}: $base-gray-200;
-
-	/* tag */
-	#{--ks-tag-background}: $base-gray-50;
-	#{--ks-tag-background-hover}: $base-gray-200;
-	#{--ks-tag-content}: $base-gray-800;
-
-	/* tooltip */
-	#{--ks-tooltip-background}: $base-white;
-	#{--ks-tooltip-border}: $base-gray-300;
-}
\ No newline at end of file