diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue
index 002d2f5d3365..ee9f6e81c333 100644
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -7,7 +7,7 @@
       :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
     >
       <a
-        class="jump-context tooltip-primary tooltip tooltip-right"
+        class="jump-context tooltip tooltip-right tooltip-primary"
         v-if="isSearching()"
         data-tip="Jump to Context"
         @click="handleJumpLineSelected($event, item)"
@@ -78,7 +78,7 @@ watch(
     }
 
     .jump-context {
-      @apply mr-2 flex items-center font-sans text-secondary hover:text-secondary-focus;
+      @apply mr-2 flex items-center font-sans text-secondary;
     }
   }
 
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index aaa6637937d9..cd600e4ec667 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -20,8 +20,8 @@
     <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
-          :class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
+          class="btn btn-primary fixed bottom-8 rounded p-3 text-primary-content shadow transition-colors"
+          :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
           @click="scrollToBottom()"
           v-show="paused"
         >
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index 467c02ba58be..ff24dce10e38 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -7,7 +7,7 @@
     <div class="input input-primary flex h-auto items-center">
       <mdi:magnify />
       <input
-        class="input flex-1"
+        class="input input-ghost flex-1"
         type="text"
         placeholder="Find / RegEx"
         ref="input"
diff --git a/assets/components/common/Toggle.vue b/assets/components/common/Toggle.vue
index ecff406b9ccc..3b6f42292a6d 100644
--- a/assets/components/common/Toggle.vue
+++ b/assets/components/common/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="label inline-flex cursor-pointer gap-4 font-normal">
-    <input type="checkbox" class="toggle toggle-primary hover:bg-primary-focus" v-model="modelValue" />
+    <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
     <slot />
   </label>
 </template>
diff --git a/assets/main.css b/assets/main.css
index e7a22cada582..772f1a2540f8 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,25 +1,21 @@
 @import "splitpanes/dist/splitpanes.css";
 
 @define-mixin light {
-  --base-lighter-color: 0 0% 100%;
-  --base-color: 0 0% 97%;
-  --base-darker-color: 0 0% 90%;
-  --base-content-color: 0 0% 21%;
+  --base-lighter-color: 100% 0 0;
+  --base-color: 97% 0 0;
+  --base-darker-color: 90% 0 0;
+  --base-content-color: 33% 0 0;
   --primary-color: 76.96% 0.143 176.65;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 34 95% 53%;
-  --secondary-focus-color: 34 95% 43%;
+  --secondary-color: 76.04% 0.168 64.07;
 }
 
 @define-mixin dark {
-  --base-lighter-color: 0 0% 14%;
-  --base-color: 0 0% 7%;
-  --base-darker-color: 0 0% 4%;
-  --base-content-color: 0 0% 86%;
+  --base-lighter-color: 25% 0 0;
+  --base-color: 18% 0 0;
+  --base-darker-color: 11% 0 0;
+  --base-content-color: 89.23% 0 0;
   --primary-color: 76.96% 0.143 176.65;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 44 100% 77%;
-  --secondary-focus-color: 44 100% 67%;
+  --secondary-color: 91.36% 0.11098 90.1243;
 }
 
 @tailwind base;
@@ -29,19 +25,17 @@
 @layer base {
   :root {
     --p: var(--primary-color);
-    --pf: var(--primary-focus-color);
-    --pc: 0 0% 100%;
+    --pc: 89.23% 0;
     --s: var(--secondary-color);
-    --sf: var(--secondary-focus-color);
-    --sc: 0 0% 4%;
+    --sc: 14.57% 0 0;
     --b1: var(--base-lighter-color);
     --b2: var(--base-color);
     --b3: var(--base-darker-color);
     --bc: var(--base-content-color);
-    --in: 207 90% 54%;
-    --inc: 207 90% 94%;
-    --er: 4 90% 58%;
-    --erc: 4 90% 98%;
+    --in: 65% 0.171 249.5;
+    --inc: 99% 0.171 249.5;
+    --er: 64% 0.218 28.85;
+    --erc: 99% 0.218 28.85;
   }
   html[data-theme="dark"] {
     @mixin dark;
@@ -94,7 +88,10 @@
 
 @layer components {
   .input {
-    @apply focus:outline-none;
+    @apply !outline-none;
+    &.input-ghost {
+      @apply focus:border-transparent;
+    }
   }
 
   .btn {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b914d9ce536c..5aae46c752ba 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,20 +10,17 @@ export default {
         "bounce-fast": "bounce 0.5s 2 both",
       },
       colors: {
-        green: "hsl(177 100% 35%)",
-        red: "hsl(4 90% 58%)",
-        purple: "hsl(291 64% 42%)",
-        blue: "hsl(207 90% 54%)",
-        orange: "hsl(25 95% 53%)",
-        base: "hsl(var(--base-color) / <alpha-value>)",
-        "base-darker": "hsl(var(--base-darker-color) / <alpha-value>)",
-        "base-lighter": "hsl(var(--base-lighter-color) / <alpha-value>)",
-        "base-content": "hsl(var(--base-content-color) / <alpha-value>)",
-
+        green: "oklch(69% 0.119722 188.479048)",
+        red: "oklch(64% 0.218 28.85)",
+        purple: "oklch(51.49% 0.215 321.03)",
+        blue: "oklch(65% 0.171 249.5)",
+        orange: "oklch(70% 0.186 48.13)",
+        base: "oklch(var(--base-color) / <alpha-value>)",
+        "base-darker": "oklch(var(--base-darker-color) / <alpha-value>)",
+        "base-lighter": "oklch(var(--base-lighter-color) / <alpha-value>)",
+        "base-content": "oklch(var(--base-content-color) / <alpha-value>)",
         primary: "oklch(var(--primary-color) / <alpha-value>)",
-        "primary-focus": "hsl(var(--primary-focus-color) / <alpha-value>)",
-        secondary: "hsl(var(--secondary-color) / <alpha-value>)",
-        "secondary-focus": "hsl(var(--secondary-focus-color) / <alpha-value>)",
+        secondary: "oklch(var(--secondary-color) / <alpha-value>)",
       },
     },
   },