From cc824031c0859825c1b9b746077d21c395d84dc1 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sat, 17 Jan 2026 18:50:12 +0900
Subject: [PATCH 01/19] improve ui design

---
 ui/index.html                                 |   8 +-
 ui/src/App.tsx                                | 286 +++---
 ui/src/components/SplitLayout.tsx             |  19 +-
 ui/src/components/TabBar.css                  | 165 ++--
 ui/src/components/ui/toggle-group.tsx         |  22 +-
 ui/src/contexts/UserPreference.tsx            |  10 +-
 .../dag-run-details/DAGRunHeader.tsx          |  26 +-
 .../chat-history/ChatHistoryTab.tsx           |  10 +-
 .../chat-history/StepMessagesTable.tsx        |  38 +-
 .../dags/components/common/NodeStatusChip.tsx | 110 +--
 .../dags/components/common/StatusDot.tsx      |  28 +-
 .../dags/components/dag-details/DAGHeader.tsx |  34 +-
 .../dag-details/NodeStatusTableRow.tsx        | 123 +--
 .../SchemaDocSidebar/PropertyTypeDisplay.tsx  |  22 +-
 .../SchemaDocSidebar/SchemaPathBreadcrumb.tsx |   6 +-
 .../dags/components/visualization/Graph.tsx   |  36 +-
 .../components/DashboardTimechart.tsx         | 160 ++--
 ui/src/layouts/Layout.tsx                     |  97 +--
 ui/src/menu.tsx                               | 497 +++++------
 ui/src/pages/system-status/index.tsx          |  13 +-
 ui/src/pages/terminal/index.tsx               |  96 +-
 ui/src/styles/global.css                      | 821 +++++-------------
 ui/src/ui/StatusChip.tsx                      |  81 +-
 ui/tailwind.config.js                         | 137 +--
 24 files changed, 1095 insertions(+), 1750 deletions(-)
diff --git a/ui/index.html b/ui/index.html
index 565c7dcf0..12843e60b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,10 +1,16 @@
 <!doctype html>
-<html lang="en" translate="no">
+<html lang="en" translate="no" class="dark" style="background-color: #020617">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/assets/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+      rel="stylesheet"
+    />
     <title>Dagu</title>
     <script>
       function getConfig() {
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 97b0ad4b7..6cba1ae24 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -3,31 +3,34 @@ import '@radix-ui/themes/styles.css';
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { SWRConfig } from 'swr';
+import { ProtectedRoute } from './components/ProtectedRoute';
 import { ErrorModalProvider } from './components/ui/error-modal';
 import { ToastProvider } from './components/ui/simple-toast';
 import { AppBarContext } from './contexts/AppBarContext';
+import { AuthProvider } from './contexts/AuthContext';
 import { Config, ConfigContext } from './contexts/ConfigContext';
-import { SearchStateProvider } from './contexts/SearchStateContext';
 import { SchemaProvider } from './contexts/SchemaContext';
-import { UserPreferencesProvider } from './contexts/UserPreference';
-import { AuthProvider } from './contexts/AuthContext';
-import { ProtectedRoute } from './components/ProtectedRoute';
+import { SearchStateProvider } from './contexts/SearchStateContext';
+import {
+  UserPreferencesProvider,
+  useUserPreferences,
+} from './contexts/UserPreference';
 import Layout from './layouts/Layout';
 import fetchJson from './lib/fetchJson';
 import Dashboard from './pages';
-import DAGs from './pages/dags';
-import DAGDetails from './pages/dags/dag';
-import Search from './pages/search';
+import APIKeysPage from './pages/api-keys';
+import AuditLogsPage from './pages/audit-logs';
 import DAGRuns from './pages/dag-runs';
 import DAGRunDetails from './pages/dag-runs/dag-run';
-import Queues from './pages/queues';
+import DAGs from './pages/dags';
+import DAGDetails from './pages/dags/dag';
 import LoginPage from './pages/login';
+import Queues from './pages/queues';
+import Search from './pages/search';
+import SystemStatus from './pages/system-status';
+import TerminalPage from './pages/terminal';
 import UsersPage from './pages/users';
-import APIKeysPage from './pages/api-keys';
 import WebhooksPage from './pages/webhooks';
-import TerminalPage from './pages/terminal';
-import AuditLogsPage from './pages/audit-logs';
-import SystemStatus from './pages/system-status';
 
 type Props = {
   config: Config;
@@ -42,8 +45,13 @@ type Props = {
  * @param config - Application configuration (e.g., `basePath`, `remoteNodes`) used to configure routing and available remote nodes.
  * @returns The top-level React element for the application.
  */
-function App({ config }: Props) {
+/**
+ * Inner App component that has access to providers
+ */
+function AppInner({ config }: Props) {
   const [title, setTitle] = React.useState<string>('');
+  const { preferences } = useUserPreferences();
+  const theme = preferences.theme || 'dark';
 
   const remoteNodes = config.remoteNodes
     .split(',')
@@ -57,41 +65,50 @@ function App({ config }: Props) {
   // Read initial value from localStorage or default to 'local'
   const getInitialNode = () => {
     const storedNode = localStorage.getItem(localStorageKey);
-    // Ensure the stored node is actually in the available nodes list
     if (storedNode && remoteNodes.includes(storedNode)) {
       return storedNode;
     }
-    return 'local'; // Default
+    return 'local';
   };
 
   const [selectedRemoteNode, setSelectedRemoteNode] =
     React.useState<string>(getInitialNode);
 
-  // Function to update state and localStorage
   const handleSelectRemoteNode = (node: string) => {
     if (remoteNodes.includes(node)) {
       setSelectedRemoteNode(node);
       localStorage.setItem(localStorageKey, node);
     } else {
-      console.warn(`Attempted to select invalid remote node: ${node}`);
-      // Optionally reset to default or handle error
       setSelectedRemoteNode('local');
       localStorage.setItem(localStorageKey, 'local');
     }
   };
 
-  // Effect to update state if remoteNodes list changes and current selection is invalid
   React.useEffect(() => {
     if (!remoteNodes.includes(selectedRemoteNode)) {
-      handleSelectRemoteNode('local'); // Reset to default if current selection is no longer valid
+      handleSelectRemoteNode('local');
     }
-    // We only want this effect to run if remoteNodes changes,
-    // or selectedRemoteNode becomes invalid relative to remoteNodes.
-    // Adding handleSelectRemoteNode to deps would cause unnecessary runs.
   }, [remoteNodes, selectedRemoteNode]);
 
+  // Effect to apply theme class to html element
+  React.useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+      root.style.backgroundColor = '#020617';
+    } else {
+      root.classList.remove('dark');
+      root.style.backgroundColor = '#ffffff';
+    }
+  }, [theme]);
+
   return (
-    <Theme appearance="light" accentColor="gray" grayColor="slate" radius="medium">
+    <Theme
+      appearance={theme}
+      accentColor="indigo"
+      grayColor="slate"
+      radius="large"
+    >
       <SWRConfig
         value={{
           fetcher: fetchJson,
@@ -101,115 +118,136 @@ function App({ config }: Props) {
         }}
       >
         <AppBarContext.Provider
-        value={{
-          title,
-          setTitle,
-          remoteNodes,
-          selectedRemoteNode,
-          selectRemoteNode: handleSelectRemoteNode,
-        }}
-      >
-        <ConfigContext.Provider value={config}>
-          <UserPreferencesProvider>
+          value={{
+            title,
+            setTitle,
+            remoteNodes,
+            selectedRemoteNode,
+            selectRemoteNode: handleSelectRemoteNode,
+          }}
+        >
+          <ConfigContext.Provider value={config}>
             <AuthProvider>
               <SearchStateProvider>
                 <SchemaProvider>
-                <ErrorModalProvider>
-                <ToastProvider>
-                  <BrowserRouter basename={config.basePath}>
-                    <Routes>
-                      {/* Public route - Login page */}
-                      <Route path="/login" element={<LoginPage />} />
+                  <ErrorModalProvider>
+                    <ToastProvider>
+                      <BrowserRouter basename={config.basePath}>
+                        <Routes>
+                          {/* Public route - Login page */}
+                          <Route path="/login" element={<LoginPage />} />
 
-                      {/* Protected routes */}
-                      <Route
-                        path="/*"
-                        element={
-                          <ProtectedRoute>
-                            <Layout navbarColor={config.navbarColor}>
-                              <Routes>
-                                <Route path="/" element={<Dashboard />} />
-                                <Route path="/dashboard" element={<Dashboard />} />
-                                <Route
-                                  path="/system-status"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <SystemStatus />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                                <Route path="/dags/" element={<DAGs />} />
-                                <Route
-                                  path="/dags/:fileName/:tab"
-                                  element={<DAGDetails />}
-                                />
-                                <Route path="/dags/:fileName/" element={<DAGDetails />} />
-                                <Route path="/search/" element={<Search />} />
-                                <Route path="/queues" element={<Queues />} />
-                                <Route path="/dag-runs" element={<DAGRuns />} />
-                                <Route
-                                  path="/dag-runs/:name/:dagRunId"
-                                  element={<DAGRunDetails />}
-                                />
-                                {/* Admin-only routes */}
-                                <Route
-                                  path="/users"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <UsersPage />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                                <Route
-                                  path="/api-keys"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <APIKeysPage />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                                <Route
-                                  path="/webhooks"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <WebhooksPage />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                                <Route
-                                  path="/terminal"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <TerminalPage />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                                <Route
-                                  path="/audit-logs"
-                                  element={
-                                    <ProtectedRoute requiredRole="admin">
-                                      <AuditLogsPage />
-                                    </ProtectedRoute>
-                                  }
-                                />
-                              </Routes>
-                            </Layout>
-                          </ProtectedRoute>
-                        }
-                      />
-                    </Routes>
-                  </BrowserRouter>
-                </ToastProvider>
-                </ErrorModalProvider>
+                          {/* Protected routes */}
+                          <Route
+                            path="/*"
+                            element={
+                              <ProtectedRoute>
+                                <Layout navbarColor={config.navbarColor}>
+                                  <Routes>
+                                    <Route path="/" element={<Dashboard />} />
+                                    <Route
+                                      path="/dashboard"
+                                      element={<Dashboard />}
+                                    />
+                                    <Route
+                                      path="/system-status"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <SystemStatus />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                    <Route path="/dags/" element={<DAGs />} />
+                                    <Route
+                                      path="/dags/:fileName/:tab"
+                                      element={<DAGDetails />}
+                                    />
+                                    <Route
+                                      path="/dags/:fileName/"
+                                      element={<DAGDetails />}
+                                    />
+                                    <Route
+                                      path="/search/"
+                                      element={<Search />}
+                                    />
+                                    <Route
+                                      path="/queues"
+                                      element={<Queues />}
+                                    />
+                                    <Route
+                                      path="/dag-runs"
+                                      element={<DAGRuns />}
+                                    />
+                                    <Route
+                                      path="/dag-runs/:name/:dagRunId"
+                                      element={<DAGRunDetails />}
+                                    />
+                                    {/* Admin-only routes */}
+                                    <Route
+                                      path="/users"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <UsersPage />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                    <Route
+                                      path="/api-keys"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <APIKeysPage />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                    <Route
+                                      path="/webhooks"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <WebhooksPage />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                    <Route
+                                      path="/terminal"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <TerminalPage />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                    <Route
+                                      path="/audit-logs"
+                                      element={
+                                        <ProtectedRoute requiredRole="admin">
+                                          <AuditLogsPage />
+                                        </ProtectedRoute>
+                                      }
+                                    />
+                                  </Routes>
+                                </Layout>
+                              </ProtectedRoute>
+                            }
+                          />
+                        </Routes>
+                      </BrowserRouter>
+                    </ToastProvider>
+                  </ErrorModalProvider>
                 </SchemaProvider>
               </SearchStateProvider>
             </AuthProvider>
-          </UserPreferencesProvider>
-        </ConfigContext.Provider>
-      </AppBarContext.Provider>
+          </ConfigContext.Provider>
+        </AppBarContext.Provider>
       </SWRConfig>
     </Theme>
   );
 }
 
-export default App;
\ No newline at end of file
+function App({ config }: Props) {
+  return (
+    <UserPreferencesProvider>
+      <AppInner config={config} />
+    </UserPreferencesProvider>
+  );
+}
+
+export default App;
diff --git a/ui/src/components/SplitLayout.tsx b/ui/src/components/SplitLayout.tsx
index a0c73a254..83b672c58 100644
--- a/ui/src/components/SplitLayout.tsx
+++ b/ui/src/components/SplitLayout.tsx
@@ -43,7 +43,9 @@ function SplitLayout({
     return defaultLeftWidth;
   });
   const [isDragging, setIsDragging] = useState(false);
-  const [leftPanelPixelWidth, setLeftPanelPixelWidth] = useState<number | null>(null);
+  const [leftPanelPixelWidth, setLeftPanelPixelWidth] = useState<number | null>(
+    null
+  );
 
   // Track actual pixel width of left panel
   useEffect(() => {
@@ -120,10 +122,7 @@ function SplitLayout({
   }, [isDragging, handleMouseMove, handleMouseUp]);
 
   return (
-    <div
-      ref={containerRef}
-      className="flex h-full overflow-hidden"
-    >
+    <div ref={containerRef} className="flex h-full overflow-hidden">
       {/* Left Panel - Full width on mobile, percentage width on desktop */}
       <div
         ref={leftPanelRef}
@@ -137,12 +136,16 @@ function SplitLayout({
 
       {/* Draggable Divider - Hidden on mobile */}
       <div
-        className="hidden md:flex items-center justify-center w-1 h-full bg-border hover:bg-primary/50 cursor-col-resize flex-shrink-0 transition-colors group"
+        className={`hidden md:flex items-center justify-center w-[1px] h-full bg-border/20 hover:bg-primary/50 hover:shadow-[0_0_10px_var(--color-primary)] cursor-col-resize flex-shrink-0 transition-all duration-300 group z-30 ${
+          isDragging ? 'bg-primary shadow-[0_0_15px_var(--color-primary)]' : ''
+        }`}
         onMouseDown={handleMouseDown}
       >
         <div
-          className={`w-0.5 h-8 rounded-full transition-colors ${
-            isDragging ? 'bg-primary' : 'bg-muted-foreground/30 group-hover:bg-primary/70'
+          className={`w-1 h-8 rounded-full transition-all duration-300 ${
+            isDragging
+              ? 'bg-primary shadow-[0_0_10px_var(--color-primary)] scale-110'
+              : 'bg-muted-foreground/30 group-hover:bg-primary group-hover:shadow-[0_0_8px_var(--color-primary)]'
           }`}
         />
       </div>
diff --git a/ui/src/components/TabBar.css b/ui/src/components/TabBar.css
index 7920fcaa1..75edf039f 100644
--- a/ui/src/components/TabBar.css
+++ b/ui/src/components/TabBar.css
@@ -1,168 +1,121 @@
-/* =============================================================================
-   90s MAC OS INSPIRED TAB SYSTEM
-   Classic Platinum-era folder tabs with 3D depth
-   ============================================================================= */
-
 .tab-bar-wrapper {
   position: relative;
   display: flex;
   align-items: flex-end;
-  padding: 4px 8px 1px; /* 1px bottom for border space */
-  background: rgb(var(--sidebar-bg));
-  border-bottom: 1px solid rgb(var(--border));
+  padding: 8px 8px 0px;
+  background: var(--sidebar);
+  border-bottom: 2px solid var(--border);
+  gap: 4px;
 }
 
 .tab-list {
   display: flex;
   align-items: flex-end;
-  gap: 2px;
+  gap: 4px;
   flex: 1;
-  min-width: 0; /* Allow shrinking */
-  overflow: visible; /* Allow active tab to extend */
+  min-width: 0;
 }
 
-/* =============================================================================
-   TAB TRIGGER - Folder tab with beveled 3D appearance
-   ============================================================================= */
-
 .tab-trigger {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 5px 8px;
-  min-width: 40px; /* Allow shrinking to very small */
-  max-width: 160px;
-  flex: 1 1 120px; /* Grow and shrink, basis 120px */
+  gap: 8px;
+  padding: 6px 12px;
+  min-width: 80px;
+  max-width: 200px;
+  flex: 0 1 auto;
   cursor: pointer;
   user-select: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
-  border: 1px solid rgb(var(--btn-secondary-border));
+  border: 1px solid var(--btn-secondary-border);
   border-bottom: none;
-  border-radius: 5px 5px 0 0;
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-top)) 0%,
-    rgb(var(--btn-secondary-bottom)) 100%
-  );
-  color: rgb(var(--sidebar-text));
-  /* 3D bevel effect */
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
-  /* No transition - instant state changes to avoid flicker */
-  /* Remove focus outline */
-  outline: none;
-}
-
-.tab-trigger:focus,
-.tab-trigger:focus-visible {
+  border-radius: 8px 8px 0 0;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  transition: all 0.2s ease;
   outline: none;
 }
 
-/* Hover state for inactive tabs */
 .tab-trigger:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-hover-top)) 0%,
-    rgb(var(--btn-secondary-hover-bottom)) 100%
-  );
+  background: var(--secondary);
+  color: var(--foreground);
 }
 
-/* =============================================================================
-   ACTIVE TAB - Raised, connected to content
-   ============================================================================= */
-
-.tab-trigger[data-state="active"] {
-  background: rgb(var(--bg));
-  color: rgb(var(--text));
-  z-index: 3;
-  margin-bottom: -2px; /* Extend below to cover border */
-  padding-bottom: 7px; /* Compensate for margin */
-  border-color: rgb(var(--border));
-  /* Stronger bevel for raised appearance */
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+.tab-trigger[data-state='active'] {
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--border);
+  border-bottom: 2px solid var(--background);
+  margin-bottom: -2px;
+  z-index: 10;
+  font-weight: 600;
+  box-shadow: 0 -4px 12px -4px rgba(0, 0, 0, 0.1);
 }
 
-/* =============================================================================
-   TAB CONTENT ELEMENTS
-   ============================================================================= */
+.tab-trigger[data-state='active']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--primary);
+  border-radius: 8px 8px 0 0;
+}
 
 .tab-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
-  min-width: 0; /* Allow text to shrink */
-  text-align: left;
 }
 
 .tab-close {
-  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border-radius: 3px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, background 0.15s;
-  color: inherit;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  opacity: 0.4;
+  transition: all 0.2s;
 }
 
 .tab-trigger:hover .tab-close,
-.tab-trigger[data-state="active"] .tab-close {
-  opacity: 0.5;
+.tab-trigger[data-state='active'] .tab-close {
+  opacity: 0.8;
 }
 
 .tab-close:hover {
+  background: var(--destructive);
+  color: white;
   opacity: 1 !important;
-  background: rgba(var(--text), 0.1);
 }
 
-/* =============================================================================
-   ADD TAB BUTTON - Matching 3D style
-   ============================================================================= */
-
 .tab-add {
-  flex-shrink: 0; /* Never shrink the add button */
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: 4px;
-  margin-bottom: 2px;
-  color: rgb(var(--sidebar-text));
-  border: 1px solid rgb(var(--btn-secondary-border));
-  border-radius: 4px;
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-top)) 0%,
-    rgb(var(--btn-secondary-bottom)) 100%
-  );
+  width: 32px;
+  height: 32px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--muted);
+  color: var(--muted-foreground);
   cursor: pointer;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.4);
-  transition: all 0.1s ease;
+  transition: all 0.2s;
 }
 
 .tab-add:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-hover-top)) 0%,
-    rgb(var(--btn-secondary-hover-bottom)) 100%
-  );
-}
-
-.tab-add:active {
-  transform: translateY(1px);
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  transform: scale(1.05);
 }
 
-/* Hide the edge element - not needed with this simpler design */
 .tab-edge-right {
   display: none;
 }
diff --git a/ui/src/components/ui/toggle-group.tsx b/ui/src/components/ui/toggle-group.tsx
index 2a78cc24b..a8b3fb594 100644
--- a/ui/src/components/ui/toggle-group.tsx
+++ b/ui/src/components/ui/toggle-group.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import React, { useRef, useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 type ToggleGroupProps = {
   value: string;
@@ -63,9 +63,7 @@ export const ToggleGroup = ({
     <div
       ref={groupRef}
       className={cn(
-        'inline-flex rounded border border-[rgb(var(--btn-secondary-border))] overflow-hidden',
-        'bg-gradient-to-b from-[rgb(var(--btn-secondary-top))] to-[rgb(var(--btn-secondary-bottom))]',
-        'border-b-[3px] border-b-[rgb(var(--btn-secondary-platform))]',
+        'inline-flex rounded-lg border border-border overflow-hidden bg-muted/50 p-1 gap-1',
         className
       )}
       role="group"
@@ -94,27 +92,17 @@ export const ToggleButton = ({
   children,
   className,
   'aria-label': ariaLabel,
-  position = 'middle',
 }: ToggleButtonProps) => {
   const isSelected = groupValue === value;
 
-  // Apply different border radius based on position
-  const borderRadiusClasses = cn({
-    'rounded-l rounded-r-none': position === 'first',
-    'rounded-r rounded-l-none': position === 'last',
-    'rounded-none': position === 'middle',
-    'rounded': position === 'single',
-  });
-
   return (
     <button
       type="button"
       className={cn(
-        'inline-flex items-center justify-center h-8 px-4 text-sm font-semibold transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer',
-        borderRadiusClasses,
+        'inline-flex items-center justify-center h-8 px-4 text-xs font-bold transition-all rounded-md cursor-pointer',
         isSelected
-          ? 'bg-gradient-to-b from-[rgb(var(--btn-primary-top))] to-[rgb(var(--btn-primary-bottom))] text-white [&_svg]:text-white'
-          : 'text-[#3d3833] hover:bg-white/50 [&_svg]:text-[#3d3833]',
+          ? 'bg-primary text-primary-foreground shadow-sm scale-100'
+          : 'text-muted-foreground hover:bg-white/10 hover:text-foreground active:scale-95',
         className
       )}
       onClick={onClick}
diff --git a/ui/src/contexts/UserPreference.tsx b/ui/src/contexts/UserPreference.tsx
index 842a62c44..a4d469b2c 100644
--- a/ui/src/contexts/UserPreference.tsx
+++ b/ui/src/contexts/UserPreference.tsx
@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 
 export type DAGRunsViewMode = 'list' | 'grouped';
 
@@ -11,6 +6,7 @@ export type UserPreferences = {
   pageLimit: number;
   dagRunsViewMode: DAGRunsViewMode;
   logWrap: boolean;
+  theme: 'light' | 'dark';
 };
 
 const UserPreferencesContext = createContext<{
@@ -33,6 +29,7 @@ export function UserPreferencesProvider({
         pageLimit: 50,
         dagRunsViewMode: 'list', // Default to list view
         logWrap: true, // Default to wrapped text
+        theme: 'dark', // Default to dark theme
       };
       return saved ? { ...defaultPrefs, ...JSON.parse(saved) } : defaultPrefs;
     } catch {
@@ -41,6 +38,7 @@ export function UserPreferencesProvider({
         pageLimit: 50,
         dagRunsViewMode: 'list' as DAGRunsViewMode,
         logWrap: true,
+        theme: 'dark',
       };
     }
   });
diff --git a/ui/src/features/dag-runs/components/dag-run-details/DAGRunHeader.tsx b/ui/src/features/dag-runs/components/dag-run-details/DAGRunHeader.tsx
index bbda776ae..b1f35ba8f 100644
--- a/ui/src/features/dag-runs/components/dag-run-details/DAGRunHeader.tsx
+++ b/ui/src/features/dag-runs/components/dag-run-details/DAGRunHeader.tsx
@@ -1,4 +1,4 @@
-import { Calendar, Server, Terminal, Timer, RefreshCw } from 'lucide-react';
+import { Calendar, RefreshCw, Server, Terminal, Timer } from 'lucide-react';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { components, Status } from '../../../../api/v2/schema';
@@ -76,9 +76,15 @@ const DAGRunHeader: React.FC<DAGRunHeaderProps> = ({ dagRun, refreshFn }) => {
       ) {
         return;
       }
-      
+
       // Check for 'r' key without modifiers
-      if (e.key === 'r' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
+      if (
+        e.key === 'r' &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey &&
+        !e.shiftKey
+      ) {
         e.preventDefault();
         handleRefresh();
       }
@@ -89,7 +95,7 @@ const DAGRunHeader: React.FC<DAGRunHeaderProps> = ({ dagRun, refreshFn }) => {
   }, [handleRefresh]);
 
   return (
-    <div className="bg-gradient-to-br from-slate-50 via-white to-slate-50 rounded-2xl p-6 mb-6 border border-border">
+    <div className="bg-card rounded-2xl p-6 mb-6 border border-border shadow-sm">
       {/* Header with title and actions */}
       <div className="flex items-start justify-between gap-6 mb-4">
         <div className="flex-1 min-w-0">
@@ -104,9 +110,7 @@ const DAGRunHeader: React.FC<DAGRunHeaderProps> = ({ dagRun, refreshFn }) => {
                 >
                   {dagRun.rootDAGRunName}
                 </a>
-                <span className="text-muted-foreground mx-1">
-                  /
-                </span>
+                <span className="text-muted-foreground mx-1">/</span>
               </>
             )}
 
@@ -122,9 +126,7 @@ const DAGRunHeader: React.FC<DAGRunHeaderProps> = ({ dagRun, refreshFn }) => {
                   >
                     {dagRun.parentDAGRunName}
                   </a>
-                  <span className="text-muted-foreground mx-1">
-                    /
-                  </span>
+                  <span className="text-muted-foreground mx-1">/</span>
                 </>
               )}
           </nav>
@@ -151,7 +153,9 @@ const DAGRunHeader: React.FC<DAGRunHeaderProps> = ({ dagRun, refreshFn }) => {
               className="relative group inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-all"
               title="Refresh (R)"
             >
-              <RefreshCw className={`h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`} />
+              <RefreshCw
+                className={`h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`}
+              />
               <span>Refresh</span>
               <span className="absolute -bottom-1 -right-1 bg-muted text-muted-foreground text-[10px] font-medium px-1 rounded-sm border opacity-0 group-hover:opacity-100 transition-opacity">
                 R
diff --git a/ui/src/features/dags/components/chat-history/ChatHistoryTab.tsx b/ui/src/features/dags/components/chat-history/ChatHistoryTab.tsx
index c1d7e1b68..f21bd4d50 100644
--- a/ui/src/features/dags/components/chat-history/ChatHistoryTab.tsx
+++ b/ui/src/features/dags/components/chat-history/ChatHistoryTab.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import { Loader2 } from 'lucide-react';
 import { components, NodeStatus } from '@/api/v2/schema';
+import { Loader2 } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 import { StepMessagesTable } from './StepMessagesTable';
 
 type DAGRunDetails = components['schemas']['DAGRunDetails'];
@@ -72,12 +72,14 @@ export function ChatHistoryTab({ dagRun }: ChatHistoryTabProps) {
     <div className="space-y-2">
       {/* Step selector dropdown */}
       <div className="flex items-center gap-2 text-xs">
-        <label htmlFor="chat-step-select" className="text-muted-foreground">Step:</label>
+        <label htmlFor="chat-step-select" className="text-muted-foreground">
+          Step:
+        </label>
         <select
           id="chat-step-select"
           value={selectedStep || ''}
           onChange={(e) => setSelectedStep(e.target.value)}
-          className="h-6 px-2 text-xs border rounded bg-white focus:outline-none focus:ring-1 focus:ring-blue-500"
+          className="h-6 px-2 text-xs border rounded bg-card focus:outline-none focus:ring-1 focus:ring-primary"
         >
           {chatSteps.map((node) => (
             <option key={node.step.name} value={node.step.name}>
diff --git a/ui/src/features/dags/components/chat-history/StepMessagesTable.tsx b/ui/src/features/dags/components/chat-history/StepMessagesTable.tsx
index d835383c7..3e138b7fd 100644
--- a/ui/src/features/dags/components/chat-history/StepMessagesTable.tsx
+++ b/ui/src/features/dags/components/chat-history/StepMessagesTable.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useContext, useEffect } from 'react';
-import { ChevronRight, Copy, Check, Loader2 } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { ChatMessageRole } from '@/api/v2/schema';
 import { Markdown } from '@/components/ui/markdown';
-import { useQuery } from '@/hooks/api';
 import { AppBarContext } from '@/contexts/AppBarContext';
-import { ChatMessageRole } from '@/api/v2/schema';
+import { useQuery } from '@/hooks/api';
+import { cn } from '@/lib/utils';
+import { Check, ChevronRight, Copy, Loader2 } from 'lucide-react';
+import { useContext, useEffect, useState } from 'react';
 
 interface StepMessagesTableProps {
   dagName: string;
@@ -17,13 +17,13 @@ interface StepMessagesTableProps {
   rootDagRunId?: string;
 }
 
-const roleConfig: Record<
-  string,
-  { label: string; borderColor: string }
-> = {
+const roleConfig: Record<string, { label: string; borderColor: string }> = {
   [ChatMessageRole.system]: { label: 'SYS', borderColor: 'border-l-amber-500' },
   [ChatMessageRole.user]: { label: 'USER', borderColor: 'border-l-blue-500' },
-  [ChatMessageRole.assistant]: { label: 'ASST', borderColor: 'border-l-green-500' },
+  [ChatMessageRole.assistant]: {
+    label: 'ASST',
+    borderColor: 'border-l-green-500',
+  },
   [ChatMessageRole.tool]: { label: 'TOOL', borderColor: 'border-l-purple-500' },
 };
 
@@ -43,8 +43,8 @@ export function StepMessagesTable({
 
   // Determine if this is a sub-DAG run
   const isSubDAGRun = !!subDAGRunId;
-  const effectiveName = isSubDAGRun ? (rootDagName || dagName) : dagName;
-  const effectiveRunId = isSubDAGRun ? (rootDagRunId || dagRunId) : dagRunId;
+  const effectiveName = isSubDAGRun ? rootDagName || dagName : dagName;
+  const effectiveRunId = isSubDAGRun ? rootDagRunId || dagRunId : dagRunId;
 
   // Query for regular DAG runs
   const regularQuery = useQuery(
@@ -67,7 +67,12 @@ export function StepMessagesTable({
     '/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/steps/{stepName}/messages',
     {
       params: {
-        path: { name: effectiveName, dagRunId: effectiveRunId, subDAGRunId: subDAGRunId || '', stepName },
+        path: {
+          name: effectiveName,
+          dagRunId: effectiveRunId,
+          subDAGRunId: subDAGRunId || '',
+          stepName,
+        },
         query: { remoteNode: appBarContext.selectedRemoteNode || 'local' },
       },
     },
@@ -136,7 +141,7 @@ export function StepMessagesTable({
   }
 
   return (
-    <div className="border rounded bg-white">
+    <div className="border rounded bg-card">
       {messages.map((msg, i) => {
         const isExpanded = expandedIndexes.has(i);
         const config = roleConfig[msg.role] || defaultRoleConfig;
@@ -145,7 +150,7 @@ export function StepMessagesTable({
           <div
             key={i}
             className={cn(
-              'border-l-2 border-b last:border-b-0 bg-white',
+              'border-l-2 border-b last:border-b-0 bg-card',
               config.borderColor
             )}
           >
@@ -193,7 +198,8 @@ export function StepMessagesTable({
                           {msg.metadata.provider}/{msg.metadata.model}
                         </div>
                         <div>
-                          in:{msg.metadata.promptTokens} out:{msg.metadata.completionTokens}
+                          in:{msg.metadata.promptTokens} out:
+                          {msg.metadata.completionTokens}
                         </div>
                       </div>
                     )}
diff --git a/ui/src/features/dags/components/common/NodeStatusChip.tsx b/ui/src/features/dags/components/common/NodeStatusChip.tsx
index e7c867e33..e617a5928 100644
--- a/ui/src/features/dags/components/common/NodeStatusChip.tsx
+++ b/ui/src/features/dags/components/common/NodeStatusChip.tsx
@@ -40,77 +40,41 @@ type Props = {
  */
 function NodeStatusChip({ status, children, size = 'md' }: Props) {
   // Determine the colors and icon based on status
-  let bgColorClass = '';
-  let textColorClass = '';
-  let borderColorClass = '';
-  let pulseAnimation = '';
+  let statusClass = '';
   let statusIcon = '';
 
   switch (status) {
-    case NodeStatus.Success: // done -> green
-      bgColorClass = 'bg-[rgba(0,128,0,0.1)],100,0,0.2)]';
-      borderColorClass = 'border-[green]';
-      textColorClass = 'text-[green]';
-      statusIcon = '✓'; // Checkmark
+    case NodeStatus.Success:
+      statusClass = 'status-success';
+      statusIcon = '✓';
       break;
-    case NodeStatus.Failed: // error -> red
-      bgColorClass = 'bg-[rgba(255,0,0,0.1)],0,0,0.2)]';
-      borderColorClass = 'border-[red]';
-      textColorClass = 'text-[red]';
-      statusIcon = '✕'; // X mark
+    case NodeStatus.Failed:
+    case NodeStatus.Rejected:
+      statusClass = 'status-failed';
+      statusIcon = status === NodeStatus.Failed ? '✕' : '⊘';
       break;
-    case NodeStatus.Running: // running -> lime
-      bgColorClass = 'bg-[rgba(0,255,0,0.1)],205,50,0.2)]';
-      borderColorClass = 'border-success';
-      textColorClass = 'text-success';
-      // No static icon - uses BrailleSpinner
+    case NodeStatus.Running:
+      statusClass = 'status-running';
       break;
-    case NodeStatus.Aborted: // aborted -> pink
-      bgColorClass =
-        'bg-[rgba(255,192,203,0.1)],20,147,0.2)]';
-      borderColorClass = 'border-[pink]';
-      textColorClass = 'text-[deeppink]';
-      statusIcon = '■'; // Square
+    case NodeStatus.NotStarted:
+    case NodeStatus.Skipped:
+      statusClass = 'status-info';
+      statusIcon = status === NodeStatus.Skipped ? '―' : '○';
       break;
-    case NodeStatus.Skipped: // skipped -> gray
-      bgColorClass =
-        'bg-[rgba(128,128,128,0.1)],169,169,0.2)]';
-      borderColorClass = 'border-[gray]';
-      textColorClass = 'text-[gray]';
-      statusIcon = '―'; // Horizontal bar
+    case NodeStatus.PartialSuccess:
+    case NodeStatus.Waiting:
+    case NodeStatus.Aborted:
+      statusClass = 'status-warning';
+      statusIcon =
+        status === NodeStatus.Aborted
+          ? '■'
+          : status === NodeStatus.PartialSuccess
+            ? '◐'
+            : '□';
       break;
-    case NodeStatus.NotStarted: // none -> lightblue
-      bgColorClass =
-        'bg-[rgba(173,216,230,0.1)],130,180,0.2)]';
-      borderColorClass = 'border-[lightblue]';
-      textColorClass = 'text-[steelblue]';
-      statusIcon = '○'; // Circle
-      break;
-    case NodeStatus.PartialSuccess: // partial success -> orange/amber
-      bgColorClass = 'bg-[rgba(245,158,11,0.1)],158,11,0.2)]';
-      borderColorClass = 'border-[#f59e0b]';
-      textColorClass = 'text-[#f59e0b]';
-      statusIcon = '◐'; // Half-filled circle
-      break;
-    case NodeStatus.Waiting: // waiting for approval -> amber/yellow
-      bgColorClass = 'bg-[rgba(245,158,11,0.15)]';
-      borderColorClass = 'border-[#f59e0b]';
-      textColorClass = 'text-[#d97706]';
-      pulseAnimation = 'animate-pulse';
-      statusIcon = '□'; // Empty square
-      break;
-    case NodeStatus.Rejected: // rejected -> red
-      bgColorClass = 'bg-[rgba(220,38,38,0.1)]';
-      borderColorClass = 'border-[#dc2626]';
-      textColorClass = 'text-[#dc2626]';
-      statusIcon = '⊘'; // Prohibited sign
-      break;
-    default: // Fallback to gray
-      bgColorClass =
-        'bg-[rgba(128,128,128,0.1)],169,169,0.2)]';
-      borderColorClass = 'border-[gray]';
-      textColorClass = 'text-[gray]';
-      statusIcon = '○'; // Circle
+    default:
+      statusClass = 'status-muted';
+      statusIcon = '○';
   }
 
   // Size classes
@@ -126,27 +90,17 @@ function NodeStatusChip({ status, children, size = 'md' }: Props) {
   return (
     <div
       className={cn(
-        'inline-flex items-center rounded-full border',
-        bgColorClass,
-        borderColorClass,
-        textColorClass,
+        'inline-flex items-center rounded-full border font-bold uppercase tracking-wider',
+        statusClass,
         sizeClasses[size]
       )}
     >
-      <span
-        className={cn('mr-1.5 inline-flex', textColorClass)}
-        aria-hidden="true"
-      >
+      <span className="mr-1.5 inline-flex" aria-hidden="true">
         {isRunning ? <BrailleSpinner /> : statusIcon}
       </span>
-      <span
-        className={cn(
-          'font-normal break-keep text-nowrap whitespace-nowrap',
-          textColorClass
-        )}
-      >
+      <span className="font-bold break-keep text-nowrap whitespace-nowrap">
         {isRunning && typeof children === 'string' ? (
-          <MatrixText text={children} className={textColorClass} />
+          <MatrixText text={children} />
         ) : (
           children
         )}
diff --git a/ui/src/features/dags/components/common/StatusDot.tsx b/ui/src/features/dags/components/common/StatusDot.tsx
index f1be147cb..3e3cccb50 100644
--- a/ui/src/features/dags/components/common/StatusDot.tsx
+++ b/ui/src/features/dags/components/common/StatusDot.tsx
@@ -12,36 +12,28 @@ export function StatusDot({ status, statusLabel }: Props) {
 
   switch (status) {
     case Status.Success:
-      bgColor = 'bg-[green]';
+      bgColor = 'bg-success';
       break;
     case Status.Failed:
-      bgColor = 'bg-[red]';
+    case Status.Rejected:
+      bgColor = 'bg-destructive';
       break;
     case Status.Running:
-      bgColor = 'bg-success';
+      bgColor = 'bg-primary';
       animation = 'animate-pulse';
       break;
-    case Status.Aborted:
-      bgColor = 'bg-[deeppink]';
-      break;
-    case Status.NotStarted:
-      bgColor = 'bg-[steelblue]';
-      break;
     case Status.Queued:
-      bgColor = 'bg-[purple]';
+    case Status.NotStarted:
+      bgColor = 'bg-info';
       break;
     case Status.PartialSuccess:
-      bgColor = 'bg-[#ea580c]';
-      break;
     case Status.Waiting:
-      bgColor = 'bg-[#f59e0b]';
-      animation = 'animate-pulse';
-      break;
-    case Status.Rejected:
-      bgColor = 'bg-[#dc2626]';
+    case Status.Aborted:
+      bgColor = 'bg-warning';
+      if (status === Status.Waiting) animation = 'animate-pulse';
       break;
     default:
-      bgColor = 'bg-[gray]';
+      bgColor = 'bg-muted';
   }
 
   return (
diff --git a/ui/src/features/dags/components/dag-details/DAGHeader.tsx b/ui/src/features/dags/components/dag-details/DAGHeader.tsx
index 43f89f1cc..6e2c8e8f7 100644
--- a/ui/src/features/dags/components/dag-details/DAGHeader.tsx
+++ b/ui/src/features/dags/components/dag-details/DAGHeader.tsx
@@ -1,4 +1,4 @@
-import { Calendar, Server, Terminal, Timer, RefreshCw } from 'lucide-react';
+import { Calendar, RefreshCw, Server, Terminal, Timer } from 'lucide-react';
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { components, Status } from '../../../../api/v2/schema';
@@ -94,10 +94,10 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
     const handleKeyPress = (e: KeyboardEvent) => {
       // Get current tab (default to 'status' if not set)
       const currentTab = params.tab || 'status';
-      
+
       // Only trigger on status tab and when not typing
       if (currentTab !== 'status') return;
-      
+
       // Check if user is typing in an input field
       const target = e.target as HTMLElement;
       if (
@@ -109,9 +109,15 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
       ) {
         return;
       }
-      
+
       // Check for 'r' key without modifiers
-      if (e.key === 'r' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
+      if (
+        e.key === 'r' &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey &&
+        !e.shiftKey
+      ) {
         e.preventDefault();
         handleRefresh();
       }
@@ -122,7 +128,7 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
   }, [params.tab, handleRefresh]);
 
   return (
-    <div className="bg-gradient-to-br from-slate-50 via-white to-slate-50 rounded-2xl p-6 mb-6 border border-border">
+    <div className="bg-card rounded-2xl p-6 mb-6 border border-border shadow-sm">
       {/* Header with title and actions */}
       <div className="flex items-start justify-between gap-6 mb-4">
         <div className="flex-1 min-w-0">
@@ -137,9 +143,7 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
                 >
                   {dagRunToDisplay.rootDAGRunName}
                 </a>
-                <span className="text-muted-foreground mx-1">
-                  /
-                </span>
+                <span className="text-muted-foreground mx-1">/</span>
               </>
             )}
 
@@ -156,9 +160,7 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
                   >
                     {dagRunToDisplay.parentDAGRunName}
                   </a>
-                  <span className="text-muted-foreground mx-1">
-                    /
-                  </span>
+                  <span className="text-muted-foreground mx-1">/</span>
                 </>
               )}
           </nav>
@@ -197,7 +199,9 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
               className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-all"
               title="Refresh (R)"
             >
-              <RefreshCw className={`h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`} />
+              <RefreshCw
+                className={`h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`}
+              />
               <span>Refresh</span>
             </button>
 
@@ -230,7 +234,9 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
             )}
 
             <div className="flex items-center gap-1.5 text-muted-foreground">
-              <span className="font-medium text-xs uppercase tracking-wide">Run ID</span>
+              <span className="font-medium text-xs uppercase tracking-wide">
+                Run ID
+              </span>
               <code className="bg-accent text-foreground px-2 py-1 rounded-md text-xs font-mono border">
                 {dagRunToDisplay.rootDAGRunId}
               </code>
diff --git a/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx b/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
index 5560b1cd9..aedd9c44a 100644
--- a/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
+++ b/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
@@ -179,21 +179,23 @@ function InlineLogViewer({
   const lineCount = data?.lineCount || 0;
 
   return (
-    <div className="bg-slate-800 rounded overflow-hidden">
+    <div className="bg-muted rounded overflow-hidden border border-border">
       {isLoading && !data ? (
-        <div className="text-slate-400 text-xs py-4 px-3">Loading logs...</div>
+        <div className="text-muted-foreground text-xs py-4 px-3">
+          Loading logs...
+        </div>
       ) : lines.length === 0 ? (
-        <div className="text-slate-400 text-xs py-4 px-3">
+        <div className="text-muted-foreground text-xs py-4 px-3">
           &lt;No log output&gt;
         </div>
       ) : (
         <div className="overflow-x-auto max-h-[400px] overflow-y-auto">
-          <pre className="font-mono text-[11px] text-slate-100 p-2">
+          <pre className="font-mono text-[11px] text-foreground p-2">
             {lines.map((line, index) => {
               const lineNumber = totalLines - lineCount + index + 1;
               return (
                 <div key={index} className="flex px-1 py-0.5">
-                  <span className="text-slate-500 mr-3 select-none w-12 text-right flex-shrink-0">
+                  <span className="text-muted-foreground/50 mr-3 select-none w-12 text-right flex-shrink-0">
                     {lineNumber}
                   </span>
                   <span className="whitespace-pre-wrap break-all flex-grow">
@@ -757,14 +759,15 @@ function NodeStatusTableRow({
                   )}
                 </div>
               )}
-              {node.approvalInputs && Object.keys(node.approvalInputs).length > 0 && (
-                <div className="text-xs text-muted-foreground leading-tight">
-                  <span className="font-medium">Inputs:</span>{' '}
-                  <span className="font-mono text-foreground/80">
-                    {JSON.stringify(node.approvalInputs)}
-                  </span>
-                </div>
-              )}
+              {node.approvalInputs &&
+                Object.keys(node.approvalInputs).length > 0 && (
+                  <div className="text-xs text-muted-foreground leading-tight">
+                    <span className="font-medium">Inputs:</span>{' '}
+                    <span className="font-mono text-foreground/80">
+                      {JSON.stringify(node.approvalInputs)}
+                    </span>
+                  </div>
+                )}
               {/* Rejection info for rejected HITL steps */}
               {node.rejectedBy && (
                 <div className="text-xs text-muted-foreground leading-tight">
@@ -780,7 +783,9 @@ function NodeStatusTableRow({
               {node.rejectionReason && (
                 <div className="text-xs text-muted-foreground leading-tight">
                   <span className="font-medium">Reason:</span>{' '}
-                  <span className="text-foreground/80">{node.rejectionReason}</span>
+                  <span className="text-foreground/80">
+                    {node.rejectionReason}
+                  </span>
                 </div>
               )}
             </div>
@@ -909,20 +914,21 @@ function NodeStatusTableRow({
                   </>
                 )}
                 {/* Retry button - hidden for Waiting and Rejected steps */}
-                {node.status !== NodeStatus.Waiting && node.status !== NodeStatus.Rejected && (
-                  <Button
-                    size="icon-sm"
-                    className="btn-3d-secondary"
-                    title="Retry from this step"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowDialog(true);
-                    }}
-                    disabled={loading || dagRun.status === Status.Running}
-                  >
-                    <Play className="h-4 w-4 text-success" />
-                  </Button>
-                )}
+                {node.status !== NodeStatus.Waiting &&
+                  node.status !== NodeStatus.Rejected && (
+                    <Button
+                      size="icon-sm"
+                      className="btn-3d-secondary"
+                      title="Retry from this step"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowDialog(true);
+                      }}
+                      disabled={loading || dagRun.status === Status.Running}
+                    >
+                      <Play className="h-4 w-4 text-success" />
+                    </Button>
+                  )}
               </div>
               <Dialog open={showDialog} onOpenChange={setShowDialog}>
                 <DialogContent>
@@ -946,11 +952,7 @@ function NodeStatusTableRow({
                       <X className="h-4 w-4" />
                       Cancel
                     </Button>
-                    <Button
-                      size="sm"
-                      onClick={handleRetry}
-                      disabled={loading}
-                    >
+                    <Button size="sm" onClick={handleRetry} disabled={loading}>
                       <Play className="h-4 w-4" />
                       {loading ? 'Retrying...' : 'Retry'}
                     </Button>
@@ -1144,15 +1146,18 @@ function NodeStatusTableRow({
       {/* Command section */}
       <div className="mb-3">
         <div className="text-xs font-medium text-foreground/90 mb-1">
-          {node.step.commands && node.step.commands.length > 1 ? 'Commands:' : 'Command:'}
+          {node.step.commands && node.step.commands.length > 1
+            ? 'Commands:'
+            : 'Command:'}
         </div>
         <div className="space-y-1.5">
           {node.step.commands && node.step.commands.length > 0 && (
             <div className="space-y-1.5">
               {node.step.commands.map((entry, idx) => {
-                const fullCmd = entry.args && entry.args.length > 0
-                  ? `${entry.command} ${entry.args.join(' ')}`
-                  : entry.command;
+                const fullCmd =
+                  entry.args && entry.args.length > 0
+                    ? `${entry.command} ${entry.args.join(' ')}`
+                    : entry.command;
                 return (
                   <div key={idx} className="flex items-start gap-1.5 text-xs">
                     {node.step.commands && node.step.commands.length > 1 ? (
@@ -1209,14 +1214,15 @@ function NodeStatusTableRow({
               )}
             </div>
           )}
-          {node.approvalInputs && Object.keys(node.approvalInputs).length > 0 && (
-            <div className="text-xs text-muted-foreground">
-              <span className="font-medium">Inputs:</span>{' '}
-              <span className="font-mono text-foreground/80">
-                {JSON.stringify(node.approvalInputs)}
-              </span>
-            </div>
-          )}
+          {node.approvalInputs &&
+            Object.keys(node.approvalInputs).length > 0 && (
+              <div className="text-xs text-muted-foreground">
+                <span className="font-medium">Inputs:</span>{' '}
+                <span className="font-mono text-foreground/80">
+                  {JSON.stringify(node.approvalInputs)}
+                </span>
+              </div>
+            )}
           {/* Rejection info for rejected HITL steps */}
           {node.rejectedBy && (
             <div className="text-xs text-muted-foreground">
@@ -1338,16 +1344,17 @@ function NodeStatusTableRow({
             </>
           )}
           {/* Retry button - hidden for Waiting and Rejected steps */}
-          {node.status !== NodeStatus.Waiting && node.status !== NodeStatus.Rejected && (
-            <button
-              className="p-2 rounded-full hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-              title="Retry from this step"
-              onClick={() => setShowDialog(true)}
-              disabled={loading || dagRun.status === Status.Running}
-            >
-              <Play className="h-6 w-6 text-success" />
-            </button>
-          )}
+          {node.status !== NodeStatus.Waiting &&
+            node.status !== NodeStatus.Rejected && (
+              <button
+                className="p-2 rounded-full hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
+                title="Retry from this step"
+                onClick={() => setShowDialog(true)}
+                disabled={loading || dagRun.status === Status.Running}
+              >
+                <Play className="h-6 w-6 text-success" />
+              </button>
+            )}
           <Dialog open={showDialog} onOpenChange={setShowDialog}>
             <DialogContent>
               <DialogHeader>
@@ -1370,11 +1377,7 @@ function NodeStatusTableRow({
                   <X className="h-4 w-4" />
                   Cancel
                 </Button>
-                <Button
-                  size="sm"
-                  onClick={handleRetry}
-                  disabled={loading}
-                >
+                <Button size="sm" onClick={handleRetry} disabled={loading}>
                   <Play className="h-4 w-4" />
                   {loading ? 'Retrying...' : 'Retry'}
                 </Button>
diff --git a/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/PropertyTypeDisplay.tsx b/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/PropertyTypeDisplay.tsx
index c27bb0c43..06a654bf4 100644
--- a/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/PropertyTypeDisplay.tsx
+++ b/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/PropertyTypeDisplay.tsx
@@ -6,17 +6,17 @@ interface PropertyTypeDisplayProps {
   className?: string;
 }
 
-// Sepia-compatible, muted color palette matching existing StatusChip patterns
+// Semantic color palette matching existing StatusChip patterns
 const typeColors: Record<string, string> = {
-  string: 'bg-[rgba(107,168,107,0.12)] text-[#5a8a5a]',
-  number: 'bg-[rgba(138,159,196,0.12)] text-[#6a7fa4]',
-  integer: 'bg-[rgba(138,159,196,0.12)] text-[#6a7fa4]',
-  boolean: 'bg-[rgba(154,122,196,0.12)] text-[#7a5aa4]',
-  array: 'bg-[rgba(196,158,106,0.12)] text-[#9a7a4a]',
-  object: 'bg-[rgba(107,168,147,0.12)] text-[#5a8a7a]',
-  enum: 'bg-[rgba(196,122,156,0.12)] text-[#a45a7a]',
-  null: 'bg-muted text-muted-foreground',
-  unknown: 'bg-muted text-muted-foreground',
+  string: 'status-success',
+  number: 'status-info',
+  integer: 'status-info',
+  boolean: 'status-info',
+  array: 'status-warning',
+  object: 'status-warning',
+  enum: 'status-warning',
+  null: 'status-muted',
+  unknown: 'status-muted',
 };
 
 export function PropertyTypeDisplay({
@@ -40,7 +40,7 @@ export function PropertyTypeDisplay({
         </span>
       ))}
       {required && (
-        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(196,114,106,0.12)] text-[#b05a52]">
+        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium status-failed">
           required
         </span>
       )}
diff --git a/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaPathBreadcrumb.tsx b/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaPathBreadcrumb.tsx
index 67da72a5c..70cd2309e 100644
--- a/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaPathBreadcrumb.tsx
+++ b/ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaPathBreadcrumb.tsx
@@ -1,6 +1,6 @@
+import type { YamlPathSegment } from '@/hooks/useYamlCursorPath';
 import { cn } from '@/lib/utils';
 import { ChevronRight } from 'lucide-react';
-import type { YamlPathSegment } from '@/hooks/useYamlCursorPath';
 
 interface SchemaPathBreadcrumbProps {
   segments: YamlPathSegment[];
@@ -34,9 +34,7 @@ export function SchemaPathBreadcrumb({
           <span
             className={cn(
               'px-1 py-0.5 rounded text-foreground',
-              segment.isArrayIndex
-                ? 'font-mono bg-[rgba(196,158,106,0.15)] text-[#9a7a4a]'
-                : 'bg-muted'
+              segment.isArrayIndex ? 'font-mono status-warning' : 'bg-muted'
             )}
           >
             {segment.isArrayIndex ? `[${segment.key}]` : segment.key}
diff --git a/ui/src/features/dags/components/visualization/Graph.tsx b/ui/src/features/dags/components/visualization/Graph.tsx
index 6d8354b81..784be8e8d 100644
--- a/ui/src/features/dags/components/visualization/Graph.tsx
+++ b/ui/src/features/dags/components/visualization/Graph.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { ToggleButton, ToggleGroup } from '@/components/ui/toggle-group';
+import { useUserPreferences } from '@/contexts/UserPreference';
 import { cn, toMermaidNodeId } from '@/lib/utils';
 import {
   ArrowDownUp,
@@ -78,6 +79,8 @@ function Graph({
   const [scale, setScale] = useState(isExpandedView ? 0.8 : 1);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const { preferences } = useUserPreferences();
+  const isDarkMode = preferences.theme !== 'light';
 
   /** Increase zoom level */
   const zoomIn = () => {
@@ -125,10 +128,11 @@ function Graph({
     maxHeight: isExpandedView ? 'none' : '300px',
     height: isExpandedView ? '100%' : 'auto',
     borderRadius: '0.5em',
-    background: `
-      linear-gradient(90deg, #f0ebe3 1px, transparent 1px),
-      linear-gradient(180deg, #f0ebe3 1px, transparent 1px)
-    `,
+    background: isDarkMode
+      ? `linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
+         linear-gradient(180deg, rgba(255,255,255,0.08) 1px, transparent 1px)`
+      : `linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px),
+         linear-gradient(180deg, rgba(0,0,0,0.15) 1px, transparent 1px)`,
     backgroundSize: '20px 20px',
   };
 
@@ -242,30 +246,32 @@ function Graph({
       );
     }
 
-    // Define node styles for different states with sepia theme colors
-    const nodeFill = '#faf8f5'; // card
-    const nodeColor = '#3d3833'; // foreground
+    // Define node styles for different states
+    // Use theme-appropriate colors for light/dark modes
+    const nodeFill = isDarkMode ? '#1e293b' : '#ffffff'; // slate-800 for dark, white for light
+    const nodeColor = isDarkMode ? '#f8fafc' : '#1e293b'; // slate-50 for dark, slate-800 for light
+    const strokeDefault = isDarkMode ? '#64748b' : '#94a3b8'; // slate-500/slate-400
 
     dat.push(
-      `classDef none color:${nodeColor},fill:${nodeFill},stroke:#c8bfb0,stroke-width:2.5px`
+      `classDef none color:${nodeColor},fill:${nodeFill},stroke:${strokeDefault},stroke-width:2.5px`
     );
     dat.push(
-      `classDef running color:${nodeColor},fill:${nodeFill},stroke:#c0ebab,stroke-width:2.5px`
+      `classDef running color:${nodeColor},fill:${nodeFill},stroke:#22c55e,stroke-width:2.5px`
     );
     dat.push(
-      `classDef error color:${nodeColor},fill:${nodeFill},stroke:#c4726a,stroke-width:2.5px`
+      `classDef error color:${nodeColor},fill:${nodeFill},stroke:#ef4444,stroke-width:2.5px`
     );
     dat.push(
-      `classDef cancel color:${nodeColor},fill:${nodeFill},stroke:#e396b3,stroke-width:2.5px`
+      `classDef cancel color:${nodeColor},fill:${nodeFill},stroke:#ec4899,stroke-width:2.5px`
     );
     dat.push(
-      `classDef done color:${nodeColor},fill:${nodeFill},stroke:#7da87d,stroke-width:2.5px`
+      `classDef done color:${nodeColor},fill:${nodeFill},stroke:#22c55e,stroke-width:2.5px`
     );
     dat.push(
-      `classDef skipped color:${nodeColor},fill:${nodeFill},stroke:#6b635a,stroke-width:2.5px`
+      `classDef skipped color:${nodeColor},fill:${nodeFill},stroke:#6b7280,stroke-width:2.5px`
     );
     dat.push(
-      `classDef partial color:${nodeColor},fill:${nodeFill},stroke:#c4956a,stroke-width:2.5px`
+      `classDef partial color:${nodeColor},fill:${nodeFill},stroke:#f59e0b,stroke-width:2.5px`
     );
     dat.push(
       `classDef waiting color:${nodeColor},fill:${nodeFill},stroke:#f59e0b,stroke-width:2.5px`
@@ -283,7 +289,7 @@ function Graph({
     });
 
     return dat.join('\n');
-  }, [steps, onClickNode, flowchart, showIcons]);
+  }, [steps, onClickNode, flowchart, showIcons, isDarkMode]);
 
   return (
     <div
diff --git a/ui/src/features/dashboard/components/DashboardTimechart.tsx b/ui/src/features/dashboard/components/DashboardTimechart.tsx
index 636154572..ce4985188 100644
--- a/ui/src/features/dashboard/components/DashboardTimechart.tsx
+++ b/ui/src/features/dashboard/components/DashboardTimechart.tsx
@@ -251,35 +251,39 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
       end: validViewEndDate,
     };
 
-    timelineInstance.current = new Timeline(timelineRef.current, new DataSet([]), {
-      start: validViewStartDate,
-      end: validViewEndDate,
-      orientation: 'top',
-      stack: true,
-      showMajorLabels: true,
-      showMinorLabels: true,
-      showTooltips: true,
-      zoomable: true,
-      verticalScroll: true,
-      zoomKey: 'ctrlKey',
-      timeAxis: { scale: 'hour', step: 1 },
-      format: {
-        minorLabels: {
-          minute: 'HH:mm',
-          hour: 'HH:mm',
+    timelineInstance.current = new Timeline(
+      timelineRef.current,
+      new DataSet([]),
+      {
+        start: validViewStartDate,
+        end: validViewEndDate,
+        orientation: 'top',
+        stack: true,
+        showMajorLabels: true,
+        showMinorLabels: true,
+        showTooltips: true,
+        zoomable: true,
+        verticalScroll: true,
+        zoomKey: 'ctrlKey',
+        timeAxis: { scale: 'hour', step: 1 },
+        format: {
+          minorLabels: {
+            minute: 'HH:mm',
+            hour: 'HH:mm',
+          },
+          majorLabels: {
+            hour: 'ddd D MMM',
+            day: 'ddd D MMM',
+          },
         },
-        majorLabels: {
-          hour: 'ddd D MMM',
-          day: 'ddd D MMM',
+        height: '100%',
+        maxHeight: '100%',
+        margin: {
+          item: { vertical: 4, horizontal: 2 },
+          axis: 2,
         },
-      },
-      height: '100%',
-      maxHeight: '100%',
-      margin: {
-        item: { vertical: 4, horizontal: 2 },
-        axis: 2,
-      },
-    });
+      }
+    );
 
     // Add range change listener for dynamic time axis
     timelineInstance.current.on('rangechanged', () => {
@@ -316,7 +320,7 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
         timelineInstance.current = null;
       }
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Only run once on mount
 
   // Update timeline data when input changes (without recreating timeline)
@@ -551,14 +555,15 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
       <style>
         {`
         .vis-timeline {
-          font-family: inherit !important;
-          font-size: 12px !important;
-          background-color: var(--card) !important;
-          border: none !important;
-          border-radius: 0 !important;
+          font-family: var(--font-sans) !important;
+          font-size: 11px !important;
+          background-color: var(--background) !important;
+          border: 1px solid var(--border) !important;
+          border-radius: 12px !important;
+          overflow: hidden !important;
         }
         .vis-timeline .vis-panel {
-          border: none !important;
+          border-color: var(--border) !important;
         }
         .vis-item .vis-item-overflow {
           overflow: visible;
@@ -568,113 +573,100 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
           position: sticky;
           top: 0;
           z-index: 1;
-          background-color: var(--muted) !important;
+          background-color: var(--card) !important;
+          border-bottom: 1px solid var(--border) !important;
         }
         .vis-labelset {
           position: sticky;
           left: 0;
           z-index: 2;
-          background-color: var(--card) !important;
+          background-color: var(--background) !important;
+          border-right: 1px solid var(--border) !important;
+        }
+        .vis-labelset .vis-label {
+          color: var(--muted-foreground) !important;
+          padding: 4px 8px !important;
+          border-bottom: 1px solid var(--border) !important;
         }
         .vis-foreground {
           background-color: transparent !important;
         }
         .vis-background {
-          background-color: var(--card) !important;
+          background-color: var(--background) !important;
         }
         .vis-center {
-          background-color: var(--card) !important;
-        }
-        .vis-left {
-          background-color: var(--card) !important;
-        }
-        .vis-right {
-          background-color: var(--card) !important;
-        }
-        .vis-top {
-          background-color: var(--muted) !important;
-        }
-        .vis-bottom {
-          background-color: var(--card) !important;
+          background-color: var(--background) !important;
         }
         .vis-time-axis {
-          background-color: var(--muted) !important;
+          background-color: var(--card) !important;
           color: var(--foreground) !important;
         }
         .vis-time-axis .vis-text {
-          font-size: 11px !important;
+          font-size: 10px !important;
           color: var(--muted-foreground) !important;
-          font-family: inherit !important;
+          font-family: var(--font-sans) !important;
         }
         .vis-time-axis .vis-text.vis-major {
-          font-size: 11px !important;
-          font-weight: 600;
           color: var(--foreground) !important;
-        }
-        .vis-time-axis .vis-text.vis-minor {
-          font-size: 10px !important;
-          color: var(--muted-foreground) !important;
+          font-weight: 600;
         }
         .vis-time-axis .vis-grid.vis-minor {
           border-color: var(--border) !important;
-          opacity: 0.3;
+          opacity: 0.5;
         }
         .vis-time-axis .vis-grid.vis-major {
           border-color: var(--border) !important;
-          opacity: 0.6;
         }
         .vis-item .vis-item-content {
           position: absolute;
           left: 100% !important;
-          padding-left: 6px;
+          padding-left: 8px;
           transform: translateY(-50%);
           top: 50%;
           white-space: nowrap;
-          font-size: 11px !important;
-          font-weight: 500;
+          font-size: 10px !important;
+          font-weight: 600;
           color: var(--foreground) !important;
-          text-shadow: 0 0 2px var(--card);
         }
         .vis-item {
           overflow: visible !important;
-          height: 20px !important;
-          border-radius: 3px !important;
-          border-width: 1px !important;
+          height: 14px !important;
+          border-radius: 4px !important;
+          border-width: 0 !important;
           cursor: pointer !important;
-          transition: opacity 0.15s ease !important;
+          transition: transform 0.1s ease, filter 0.1s ease !important;
+          box-shadow: 0 0 10px rgba(0,0,0,0.1);
         }
         .vis-item:hover {
-          opacity: 0.85 !important;
-        }
-        .vis-panel {
-          background-color: var(--card) !important;
+          filter: brightness(1.2);
+          transform: scaleY(1.2);
+          z-index: 100 !important;
         }
         .vis-item.vis-selected {
-          border-color: var(--ring) !important;
-          border-width: 2px !important;
+          border-width: 1px !important;
+          border-color: var(--primary) !important;
+          box-shadow: 0 0 15px rgba(var(--primary), 0.3);
         }
         .vis-current-time {
           background-color: var(--primary) !important;
           width: 2px !important;
+          box-shadow: 0 0 10px rgba(var(--primary), 0.4);
         }
-        .vis-custom-time {
-          background-color: var(--primary) !important;
-        }
-        /* Scrollbar styling */
+        /* Scrollbar styling for timeline */
         .vis-timeline::-webkit-scrollbar {
           width: 8px;
           height: 8px;
         }
         .vis-timeline::-webkit-scrollbar-track {
-          background: var(--muted);
-          border-radius: 4px;
+          background: var(--background);
         }
         .vis-timeline::-webkit-scrollbar-thumb {
-          background: var(--border);
-          border-radius: 4px;
+          background: var(--muted);
+          border-radius: 10px;
+          border: 2px solid var(--background);
         }
         .vis-timeline::-webkit-scrollbar-thumb:hover {
-          background: var(--muted-foreground);
+          background: var(--secondary);
         }
         `}
       </style>
diff --git a/ui/src/layouts/Layout.tsx b/ui/src/layouts/Layout.tsx
index 7db273474..3c120f5ae 100644
--- a/ui/src/layouts/Layout.tsx
+++ b/ui/src/layouts/Layout.tsx
@@ -56,7 +56,6 @@ function getContrastColor(input?: string): string {
 }
 
 // Constants
-const sidebarWidthCollapsed = 'w-12'; // 48px for icon-only sidebar
 
 type LayoutProps = {
   navbarColor?: string;
@@ -107,24 +106,19 @@ function Content({ navbarColor, children }: LayoutProps) {
   };
 
   return (
-    <div className="flex h-screen w-screen overflow-hidden bg-background">
-      {/* Desktop Sidebar - Hidden on mobile, visible in collapsed state on desktop */}
-      <div
+    <div className="flex h-screen w-full overflow-hidden bg-background">
+      {/* Sidebar - Desktop */}
+      <aside
         className={cn(
-          // Modern base styles with sidebar background
-          'h-full overflow-hidden',
+          'hidden md:block h-full transition-all duration-300 ease-in-out border-r border-border/40 z-20',
+          isSidebarExpanded ? 'w-60' : 'w-[68px]',
           !hasCustomColor && 'bg-sidebar text-sidebar-foreground',
-          hasCustomColor && 'custom-sidebar-color',
-          // Hidden on mobile, visible on desktop
-          'hidden md:block',
-          'z-40 transition-all duration-200 ease-in-out',
-          isSidebarExpanded ? 'w-60' : sidebarWidthCollapsed
+          hasCustomColor && 'custom-sidebar-color'
         )}
         style={sidebarStyle}
       >
-        {/* Simplified flex column layout */}
         <div className="flex flex-col h-full">
-          <nav className="flex-1">
+          <nav className="flex-1 px-3 py-4">
             <MainListItems
               isOpen={isSidebarExpanded}
               onToggle={toggleSidebar}
@@ -132,33 +126,66 @@ function Content({ navbarColor, children }: LayoutProps) {
             />
           </nav>
         </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <div className="flex flex-col flex-1 h-full overflow-hidden relative bg-background/50">
+        {/* Mobile Header Bar */}
+        <header
+          className={cn(
+            'md:hidden flex items-center justify-between h-14 px-4 flex-shrink-0 border-b border-border/40',
+            !hasCustomColor && 'bg-sidebar text-sidebar-foreground',
+            hasCustomColor && 'custom-sidebar-color'
+          )}
+          style={sidebarStyle}
+        >
+          <button
+            className="p-2 rounded-md hover:bg-white/5 transition-colors"
+            onClick={() => setIsMobileSidebarOpen(true)}
+            aria-label="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <span className="font-semibold text-sm tracking-tight uppercase opacity-80">
+            {config.title || 'Dagu'}
+          </span>
+          <div className="w-8" />
+        </header>
+
+        {/* Scrollable Content */}
+        <main className="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-6 lg:p-8">
+          <div className="w-full h-full">{children}</div>
+        </main>
       </div>
 
-      {/* Mobile Sidebar - Overlay that appears when hamburger menu is clicked */}
+      {/* Mobile Sidebar - Overlay */}
       {isMobileSidebarOpen && (
         <div
-          className="fixed inset-0 bg-black/50 z-50 md:hidden flex"
+          className="fixed inset-0 bg-background/80 z-50 md:hidden flex backdrop-blur-md"
           onClick={() => setIsMobileSidebarOpen(false)}
         >
           <div
             className={cn(
-              'h-full w-60 overflow-hidden',
+              'h-full w-64 overflow-hidden shadow-2xl border-r border-border/40',
               !hasCustomColor && 'bg-sidebar text-sidebar-foreground',
               hasCustomColor && 'custom-sidebar-color'
             )}
             style={sidebarStyle}
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex justify-end p-4">
+            <div className="flex justify-between items-center p-4 border-b border-border/10">
+              <span className="font-bold text-lg">
+                {config.title || 'Dagu'}
+              </span>
               <button
                 onClick={() => setIsMobileSidebarOpen(false)}
-                className="text-current hover:opacity-70 transition-colors"
+                className="p-1 hover:bg-white/5 rounded-md transition-colors"
               >
-                <X className="h-6 w-6" />
+                <X className="h-5 w-5" />
               </button>
             </div>
-            <div className="flex flex-col h-full">
-              <nav className="flex-1">
+            <div className="flex flex-col h-full pt-2">
+              <nav className="flex-1 px-3">
                 <MainListItems
                   isOpen={true}
                   onNavItemClick={() => setIsMobileSidebarOpen(false)}
@@ -169,34 +196,6 @@ function Content({ navbarColor, children }: LayoutProps) {
           </div>
         </div>
       )}
-
-      {/* Main Content Area */}
-      <div className="flex flex-col flex-1 h-full overflow-hidden bg-muted/30">
-        {/* Mobile Header Bar */}
-        <div
-          className={cn(
-            'md:hidden flex items-center justify-between h-12 px-3 flex-shrink-0',
-            !hasCustomColor && 'bg-sidebar text-sidebar-foreground',
-            hasCustomColor && 'custom-sidebar-color'
-          )}
-          style={sidebarStyle}
-        >
-          <button
-            className="p-1.5 rounded-md hover:bg-white/10 transition-colors"
-            onClick={() => setIsMobileSidebarOpen(true)}
-            aria-label="Open menu"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-          <span className="font-bold text-lg">{config.title || 'Dagu'}</span>
-          <div className="w-8" /> {/* Spacer for balance */}
-        </div>
-
-        {/* Scrollable Content */}
-        <main className="flex-1 overflow-y-auto overflow-x-hidden px-2 md:px-2 py-2 md:py-2">
-          {children}
-        </main>
-      </div>
     </div>
   );
 }
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index d4d44ff7f..f25d78ab8 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -16,10 +16,12 @@ import {
   History,
   Inbox,
   KeyRound,
+  Moon,
   Network,
   PanelLeft,
   ScrollText,
   Search,
+  Sun,
   Terminal,
   Users,
   Webhook,
@@ -27,28 +29,18 @@ import {
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { AppBarContext } from './contexts/AppBarContext';
+import { useUserPreferences } from './contexts/UserPreference';
 
-// Reusable Icon component using Lucide React
-function Icon({
-  children,
-  isActive,
-}: {
-  children: React.ReactNode;
-  isActive?: boolean;
-}) {
-  return (
-    <span
-      className={cn(
-        'flex items-center justify-center w-4 h-4 transform-none text-sidebar-foreground',
-        isActive ? 'text-sidebar-foreground' : 'text-sidebar-foreground'
-      )}
-    >
-      {children}
-    </span>
-  );
-}
+// Navigation Item Props
+type NavItemProps = {
+  to: string;
+  icon: React.ReactNode;
+  text: string;
+  isOpen: boolean;
+  onClick?: () => void;
+};
 
-// Define props for mainListItems to accept isOpen, onNavItemClick, onToggle, and customColor
+// Main List Items Props
 type MainListItemsProps = {
   isOpen?: boolean;
   onNavItemClick?: () => void;
@@ -56,324 +48,305 @@ type MainListItemsProps = {
   customColor?: boolean;
 };
 
-// Main navigation items structure - now accepts isOpen prop
+// NavItem component with Obsidian Deep styling
+function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
+  const location = useLocation();
+  const isActive = location.pathname.startsWith(to);
+
+  return (
+    <div className={cn('px-1', !isOpen && 'flex justify-center')}>
+      <Link
+        to={to}
+        onClick={onClick}
+        className={cn(
+          'flex items-center rounded-lg transition-all duration-200 ease-in-out px-2 group relative',
+          isOpen ? 'h-9 w-full gap-3' : 'h-10 w-10 justify-center',
+          isActive
+            ? 'text-foreground bg-primary/10 shadow-[inset_0_0_0_1px_rgba(99,102,241,0.2)]'
+            : 'text-sidebar-foreground hover:text-foreground hover:bg-white/5'
+        )}
+        aria-current={isActive ? 'page' : undefined}
+        title={isOpen ? '' : text}
+      >
+        {isActive && (
+          <div className="absolute left-0 w-1 h-4 bg-primary rounded-r-full shadow-[0_0_8px_rgba(99,102,241,0.6)]" />
+        )}
+        <div
+          className={cn(
+            'transition-transform duration-200 flex items-center justify-center',
+            isActive
+              ? 'text-primary scale-110'
+              : 'opacity-70 group-hover:opacity-100 group-hover:scale-105'
+          )}
+        >
+          {icon}
+        </div>
+        {isOpen && (
+          <span
+            className={cn(
+              'text-[13px] font-medium transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis',
+              isActive
+                ? 'text-foreground'
+                : 'text-sidebar-foreground group-hover:text-foreground'
+            )}
+          >
+            {text}
+          </span>
+        )}
+      </Link>
+    </div>
+  );
+}
+
+// Exported Nav Items Component
 export const mainListItems = React.forwardRef<
   HTMLDivElement,
   MainListItemsProps
 >(({ isOpen = false, onNavItemClick, onToggle }, ref) => {
-  // Get version from config at the top level of the component
   const config = useConfig();
   const isAdmin = useIsAdmin();
+  const { preferences, updatePreference } = useUserPreferences();
 
-  // State for hover
-  const [isHovered, setIsHovered] = React.useState(false);
+  const theme = preferences.theme || 'dark';
+  const toggleTheme = () => {
+    updatePreference('theme', theme === 'dark' ? 'light' : 'dark');
+  };
 
   return (
     <div ref={ref} className="flex flex-col h-full">
-      {/* Fixed height header with menu toggle button */}
-      <div className="h-8 relative mb-1">
-        {/* When collapsed: Show first letter of title, switch to panel icon on hover */}
-        {!isOpen && (
-          <button
-            onClick={() => {
-              setIsHovered(false);
-              onToggle?.();
-            }}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-            className="absolute left-3 top-1/2 transform -translate-y-1/2 w-6 h-6 flex items-center justify-center z-10 transition-all duration-200 cursor-pointer"
-            aria-label="Toggle sidebar"
-          >
-            {isHovered ? (
-              <PanelLeft
-                size={20}
-                className="text-sidebar-foreground hover:text-sidebar-foreground/70"
-              />
-            ) : (
-              <span className="text-lg font-bold text-sidebar-foreground">
-                {(config.title || 'Dagu').charAt(0).toUpperCase()}
-              </span>
-            )}
-          </button>
-        )}
-
-        {/* When expanded: Title and panel icon on right */}
-        {isOpen && (
+      {/* Sidebar Header */}
+      <div className="h-14 relative mb-6 flex items-center px-3 border-b border-white/[0.03]">
+        {isOpen ? (
           <>
-            <div className="absolute inset-0 flex items-center pl-3">
-              <span className="font-bold tracking-wide select-none text-xl text-sidebar-foreground">
+            <div className="flex-1 flex items-center gap-2 truncate">
+              <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.4)]">
+                <span className="text-white font-bold text-sm">D</span>
+              </div>
+              <span className="font-bold tracking-tight text-lg text-foreground select-none truncate">
                 {config.title || 'Dagu'}
               </span>
             </div>
             <button
-              onClick={() => {
-                setIsHovered(false);
-                onToggle?.();
-              }}
-              className="absolute right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 flex items-center justify-center z-10 text-sidebar-foreground/40 hover:text-sidebar-foreground/70 transition-all duration-200 cursor-pointer"
-              aria-label="Toggle sidebar"
+              onClick={onToggle}
+              className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-white/5 rounded-lg transition-all"
+              aria-label="Collapse sidebar"
             >
-              <PanelLeft size={20} />
+              <PanelLeft size={18} />
             </button>
           </>
+        ) : (
+          <button
+            onClick={onToggle}
+            className="mx-auto w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 transition-all text-foreground glow-sm active:scale-95"
+            aria-label="Expand sidebar"
+          >
+            <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.4)]">
+              <span className="text-white font-bold text-sm">D</span>
+            </div>
+          </button>
         )}
       </div>
-      {/* Navigation */}
-      <nav className="flex-1 flex flex-col py-1 px-1">
+
+      <nav className="flex-1 flex flex-col gap-6">
         {/* Remote Node Selector */}
         <AppBarContext.Consumer>
           {(context) => {
-            // Hide remote node selector when no remote nodes are configured
-            if (!context.remoteNodes || context.remoteNodes.length === 0) {
+            if (!context.remoteNodes || context.remoteNodes.length === 0)
               return null;
-            }
-
             return (
-              <div className="mb-3 px-1">
+              <div className="px-1">
                 {isOpen ? (
                   <Select
                     value={context.selectedRemoteNode}
                     onValueChange={context.selectRemoteNode}
                   >
-                    <SelectTrigger className="h-8 w-full text-xs bg-sidebar-foreground/10 border border-sidebar-foreground/20 text-sidebar-foreground hover:bg-sidebar-foreground/15 focus:ring-1 focus:ring-sidebar-foreground/30 focus:ring-offset-0 rounded-md">
-                      <div className="flex items-center gap-2">
-                        <Globe size={14} className="shrink-0 opacity-70" />
+                    <SelectTrigger className="h-9 w-full bg-white/5 border-white/5 text-xs text-sidebar-foreground hover:bg-white/10 transition-colors">
+                      <div className="flex items-center gap-2 truncate">
+                        <Globe size={14} className="opacity-60" />
                         <SelectValue />
                       </div>
                     </SelectTrigger>
                     <SelectContent>
                       {context.remoteNodes.map((node) => (
-                        <SelectItem key={node} value={node} className="text-sm">
+                        <SelectItem key={node} value={node}>
                           {node}
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 ) : (
-                  <div className="flex justify-center">
-                    <Select
-                      value={context.selectedRemoteNode}
-                      onValueChange={context.selectRemoteNode}
-                    >
-                      <SelectTrigger
-                        className="w-8 h-8 p-0 bg-sidebar-foreground/10 border border-sidebar-foreground/20 text-sidebar-foreground hover:bg-sidebar-foreground/15 focus:ring-1 focus:ring-sidebar-foreground/30 focus:ring-offset-0 rounded-md [&>svg:last-child]:hidden flex items-center justify-center"
-                        title={`Node: ${context.selectedRemoteNode}`}
-                      >
-                        <Globe size={16} className="shrink-0" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {context.remoteNodes.map((node) => (
-                          <SelectItem
-                            key={node}
-                            value={node}
-                            className="text-sm"
-                          >
-                            {node}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
+                  <Select
+                    value={context.selectedRemoteNode}
+                    onValueChange={context.selectRemoteNode}
+                  >
+                    <SelectTrigger className="w-10 h-10 p-0 bg-white/5 border-white/5 hover:bg-white/10 [&>svg:last-child]:hidden flex items-center justify-center rounded-lg transition-all">
+                      <Globe size={18} className="text-primary" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {context.remoteNodes.map((node) => (
+                        <SelectItem key={node} value={node}>
+                          {node}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 )}
               </div>
             );
           }}
         </AppBarContext.Consumer>
 
-        {/* Overview Section */}
-        <div className="space-y-0.5">
-          {isOpen && (
-            <div className="px-2 py-0.5">
-              <span className="text-[11px] text-sidebar-foreground/70 font-medium">
-                Overview
-              </span>
-            </div>
-          )}
-          <NavItem
-            to="/dashboard"
-            text="Dashboard"
-            icon={<BarChart2 size={16} />}
-            isOpen={isOpen}
-            onClick={onNavItemClick}
-          />
-          {isAdmin && (
+        {/* Nav Sections */}
+        <div className="space-y-6">
+          <div className="space-y-1">
+            {isOpen && (
+              <div className="px-3 mb-1 text-[10px] font-bold text-muted-foreground/50 uppercase tracking-widest">
+                System
+              </div>
+            )}
             <NavItem
-              to="/system-status"
-              text="System Status"
-              icon={<Activity size={16} />}
+              to="/dashboard"
+              text="Dashboard"
+              icon={<BarChart2 size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
             />
-          )}
-        </div>
-
-        {/* Workflows Section */}
-        <div className="space-y-0.5 mt-2">
-          {!isOpen && (
-            <div className="mx-auto w-4 border-t border-sidebar-foreground/30 mb-1" />
-          )}
-          {isOpen && (
-            <div className="px-2 py-0.5">
-              <span className="text-[11px] text-sidebar-foreground/70 font-medium">
-                Workflows
-              </span>
-            </div>
-          )}
-          <NavItem
-            to="/queues"
-            text="Queues"
-            icon={<Inbox size={16} />}
-            isOpen={isOpen}
-            onClick={onNavItemClick}
-          />
-          <NavItem
-            to="/dag-runs"
-            text="DAG Runs"
-            icon={<History size={16} />}
-            isOpen={isOpen}
-            onClick={onNavItemClick}
-          />
-          <NavItem
-            to="/dags"
-            text="DAG Definitions"
-            icon={<Network size={16} />}
-            isOpen={isOpen}
-            onClick={onNavItemClick}
-          />
-          <NavItem
-            to="/search"
-            text="Search DAG Definitions"
-            icon={<Search size={16} />}
-            isOpen={isOpen}
-            onClick={onNavItemClick}
-          />
-        </div>
-
-        {/* System Section - only show if admin with builtin auth */}
-        {isAdmin && config.authMode === 'builtin' && (
-          <div className="space-y-0.5 mt-2">
-            {!isOpen && (
-              <div className="mx-auto w-4 border-t border-sidebar-foreground/30 mb-1" />
+            {isAdmin && (
+              <NavItem
+                to="/system-status"
+                text="System Status"
+                icon={<Activity size={18} />}
+                isOpen={isOpen}
+                onClick={onNavItemClick}
+              />
             )}
+          </div>
+
+          <div className="space-y-1">
             {isOpen && (
-              <div className="px-2 py-0.5">
-                <span className="text-[11px] text-sidebar-foreground/70 font-medium">
-                  System
-                </span>
+              <div className="px-3 mb-1 text-[10px] font-bold text-muted-foreground/50 uppercase tracking-widest">
+                Workflows
               </div>
             )}
             <NavItem
-              to="/users"
-              text="User Management"
-              icon={<Users size={16} />}
+              to="/queues"
+              text="Queues"
+              icon={<Inbox size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
             />
             <NavItem
-              to="/api-keys"
-              text="API Keys"
-              icon={<KeyRound size={16} />}
+              to="/dag-runs"
+              text="Runs"
+              icon={<History size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
             />
             <NavItem
-              to="/webhooks"
-              text="Webhooks"
-              icon={<Webhook size={16} />}
+              to="/dags"
+              text="Definitions"
+              icon={<Network size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
             />
-            {config.terminalEnabled && (
-              <NavItem
-                to="/terminal"
-                text="Terminal"
-                icon={<Terminal size={16} />}
-                isOpen={isOpen}
-                onClick={onNavItemClick}
-              />
-            )}
             <NavItem
-              to="/audit-logs"
-              text="Audit Logs"
-              icon={<ScrollText size={16} />}
+              to="/search"
+              text="Search"
+              icon={<Search size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
             />
           </div>
-        )}
+
+          {isAdmin && config.authMode === 'builtin' && (
+            <div className="space-y-1">
+              {isOpen && (
+                <div className="px-3 mb-1 text-[10px] font-bold text-muted-foreground/50 uppercase tracking-widest">
+                  Admin
+                </div>
+              )}
+              <NavItem
+                to="/users"
+                text="Users"
+                icon={<Users size={18} />}
+                isOpen={isOpen}
+                onClick={onNavItemClick}
+              />
+              <NavItem
+                to="/api-keys"
+                text="API Keys"
+                icon={<KeyRound size={18} />}
+                isOpen={isOpen}
+                onClick={onNavItemClick}
+              />
+              <NavItem
+                to="/webhooks"
+                text="Webhooks"
+                icon={<Webhook size={18} />}
+                isOpen={isOpen}
+                onClick={onNavItemClick}
+              />
+              {config.terminalEnabled && (
+                <NavItem
+                  to="/terminal"
+                  text="Terminal"
+                  icon={<Terminal size={18} />}
+                  isOpen={isOpen}
+                  onClick={onNavItemClick}
+                />
+              )}
+              <NavItem
+                to="/audit-logs"
+                text="Audit Logs"
+                icon={<ScrollText size={18} />}
+                isOpen={isOpen}
+                onClick={onNavItemClick}
+              />
+            </div>
+          )}
+        </div>
       </nav>
-      {/* User Menu */}
-      <div className={cn('px-1', isOpen ? '' : 'flex justify-center')}>
-        <UserMenu isCollapsed={!isOpen} />
-      </div>
-      {/* Version tag at the bottom */}
-      {config.version && (
+
+      {/* User & Version & Theme */}
+      <div className="mt-auto pt-4 flex flex-col gap-3">
         <div
-          className={cn(
-            'px-2 pb-2 pt-1 text-[10px] text-sidebar-foreground/50',
-            isOpen ? 'text-left' : 'text-center'
-          )}
+          className={cn('px-2', !isOpen && 'flex flex-col items-center gap-2')}
         >
-          v{isOpen ? config.version : config.version.split('.')[0]}
+          <button
+            onClick={toggleTheme}
+            className={cn(
+              'flex items-center gap-3 w-full p-2 rounded-lg transition-all duration-200 hover:bg-white/5 group',
+              !isOpen && 'justify-center border border-white/5'
+            )}
+            title={
+              isOpen
+                ? ''
+                : `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`
+            }
+          >
+            <div className="flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
+              {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
+            </div>
+            {isOpen && (
+              <span className="text-[13px] font-medium text-sidebar-foreground group-hover:text-foreground">
+                {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+              </span>
+            )}
+          </button>
+          <UserMenu isCollapsed={!isOpen} />
         </div>
-      )}
+        {config.version && (
+          <div
+            className={cn(
+              'px-4 pb-4 text-[10px] font-mono text-muted-foreground/70',
+              !isOpen && 'text-center px-0'
+            )}
+          >
+            {isOpen ? `v${config.version}` : config.version.split('.')[0]}
+          </div>
+        )}
+      </div>
     </div>
   );
 });
-mainListItems.displayName = 'MainListItems'; // Add display name for DevTools
-
-// Refactored NavItem component using Tailwind
-type NavItemProps = {
-  to: string;
-  icon: React.ReactNode;
-  text: string;
-  isOpen: boolean;
-  onClick?: () => void; // Add onClick prop
-};
-
-function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
-  const location = useLocation();
-  const isActive = location.pathname.startsWith(to);
-
-  // Use different layouts for expanded and collapsed states
-  if (isOpen) {
-    return (
-      <Link
-        to={to}
-        onClick={onClick}
-        className={cn(
-          'flex items-center h-7 text-xs font-medium rounded transition-all duration-200 ease-in-out px-2 gap-2',
-          isActive
-            ? 'text-sidebar-foreground bg-sidebar-foreground/10'
-            : 'text-sidebar-foreground hover:bg-sidebar-foreground/5'
-        )}
-        aria-current={isActive ? 'page' : undefined}
-        title={text}
-      >
-        <Icon isActive={isActive}>{icon}</Icon>
-        <span className="font-medium text-sidebar-foreground text-xs">
-          {text}
-        </span>
-      </Link>
-    );
-  } else {
-    return (
-      <div className="flex justify-center">
-        <Link
-          to={to}
-          onClick={onClick}
-          className={cn(
-            'flex items-center justify-center w-7 h-7 text-xs font-medium rounded transition-all duration-200 ease-in-out',
-            isActive
-              ? 'text-sidebar-foreground bg-sidebar-foreground/10'
-              : 'text-sidebar-foreground hover:bg-sidebar-foreground/5'
-          )}
-          aria-current={isActive ? 'page' : undefined}
-          title={text}
-        >
-          <Icon isActive={isActive}>{icon}</Icon>
-        </Link>
-      </div>
-    );
-  }
-}
+mainListItems.displayName = 'MainListItems';
diff --git a/ui/src/pages/system-status/index.tsx b/ui/src/pages/system-status/index.tsx
index 1ff9da794..51c1fad5b 100644
--- a/ui/src/pages/system-status/index.tsx
+++ b/ui/src/pages/system-status/index.tsx
@@ -203,7 +203,10 @@ function SystemStatus() {
 
       {/* Workers Status */}
       <h2 className="text-xl font-semibold mt-8 mb-4">Workers</h2>
-      <div className="rounded-xl border border-border bg-surface overflow-hidden" style={{ minHeight: '200px' }}>
+      <div
+        className="rounded-xl border border-border bg-surface overflow-hidden"
+        style={{ minHeight: '200px' }}
+      >
         <WorkersSummary
           workers={workersData?.workers || []}
           isLoading={!workersData && !workersError}
@@ -217,28 +220,28 @@ function SystemStatus() {
         <ResourceChart
           title="CPU Usage"
           data={resourceData?.cpu}
-          color="#c4956a" // primary
+          color="var(--primary)"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Memory Usage"
           data={resourceData?.memory}
-          color="#8a9fc4" // info
+          color="var(--info)"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Disk Usage"
           data={resourceData?.disk}
-          color="#7da87d" // success
+          color="var(--success)"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Load Average"
           data={resourceData?.load}
-          color="#d4a574" // chart-4
+          color="var(--warning)"
           unit=""
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
diff --git a/ui/src/pages/terminal/index.tsx b/ui/src/pages/terminal/index.tsx
index ca3f465b4..90ec02b83 100644
--- a/ui/src/pages/terminal/index.tsx
+++ b/ui/src/pages/terminal/index.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useRef, useContext, useCallback, useState } from 'react';
-import { Terminal } from '@xterm/xterm';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import { TOKEN_KEY, useAuth, useIsAdmin } from '@/contexts/AuthContext';
+import { useConfig } from '@/contexts/ConfigContext';
+import { useUserPreferences } from '@/contexts/UserPreference';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
+import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
-import { useConfig } from '@/contexts/ConfigContext';
-import { useAuth, useIsAdmin, TOKEN_KEY } from '@/contexts/AuthContext';
-import { AppBarContext } from '@/contexts/AppBarContext';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 type MessageType = 'input' | 'output' | 'resize' | 'close' | 'error';
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
@@ -24,7 +25,10 @@ function getStatusBadgeClass(status: ConnectionStatus): string {
   }
 }
 
-function getStatusText(status: ConnectionStatus, errorMessage: string | null): string {
+function getStatusText(
+  status: ConnectionStatus,
+  errorMessage: string | null
+): string {
   switch (status) {
     case 'connected':
       return 'Connected';
@@ -55,9 +59,13 @@ export default function TerminalPage() {
   const { user } = useAuth();
   const isAdmin = useIsAdmin();
   const appBarContext = useContext(AppBarContext);
-  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected');
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>('disconnected');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  const { preferences } = useUserPreferences();
+  const theme = preferences.theme || 'dark';
+
   // Set page title on mount
   useEffect(() => {
     appBarContext.setTitle('Terminal');
@@ -84,21 +92,21 @@ export default function TerminalPage() {
   useEffect(() => {
     if (!termRef.current || !isAdmin || !config.terminalEnabled) return;
 
-    // Initialize terminal
+    // Initialize terminal with theme
     const term = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
       theme: {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4',
-        cursor: '#d4d4d4',
-        cursorAccent: '#1e1e1e',
-        selectionBackground: '#264f78',
+        background: theme === 'dark' ? '#020617' : '#ffffff',
+        foreground: theme === 'dark' ? '#d4d4d4' : '#020617',
+        cursor: theme === 'dark' ? '#d4d4d4' : '#020617',
+        cursorAccent: theme === 'dark' ? '#020617' : '#ffffff',
+        selectionBackground: theme === 'dark' ? '#264f78' : '#add6ff',
       },
       allowProposedApi: true,
     });
-
+    /* ... existing initialization ... */
     const fitAddon = new FitAddon();
     const webLinksAddon = new WebLinksAddon();
 
@@ -108,7 +116,7 @@ export default function TerminalPage() {
 
     terminalRef.current = term;
     fitAddonRef.current = fitAddon;
-
+    /* ... rest of the effect ... */
     // Initial fit
     setTimeout(() => fitAddon.fit(), 0);
 
@@ -134,11 +142,13 @@ export default function TerminalPage() {
       // Send initial resize
       setTimeout(() => {
         fitAddon.fit();
-        ws.send(JSON.stringify({
-          type: 'resize',
-          cols: term.cols,
-          rows: term.rows,
-        }));
+        ws.send(
+          JSON.stringify({
+            type: 'resize',
+            cols: term.cols,
+            rows: term.rows,
+          })
+        );
       }, 100);
     };
 
@@ -171,10 +181,12 @@ export default function TerminalPage() {
     // Handle terminal input
     term.onData((data) => {
       if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({
-          type: 'input',
-          data: btoa(data),
-        }));
+        ws.send(
+          JSON.stringify({
+            type: 'input',
+            data: btoa(data),
+          })
+        );
       }
     });
 
@@ -183,11 +195,13 @@ export default function TerminalPage() {
       if (fitAddon && term) {
         fitAddon.fit();
         if (ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({
-            type: 'resize',
-            cols: term.cols,
-            rows: term.rows,
-          }));
+          ws.send(
+            JSON.stringify({
+              type: 'resize',
+              cols: term.cols,
+              rows: term.rows,
+            })
+          );
         }
       }
     });
@@ -197,12 +211,15 @@ export default function TerminalPage() {
     // Cleanup
     return () => {
       resizeObserver.disconnect();
-      if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+      if (
+        ws.readyState === WebSocket.OPEN ||
+        ws.readyState === WebSocket.CONNECTING
+      ) {
         ws.close(1000, 'Component unmounted');
       }
       term.dispose();
     };
-  }, [config.basePath, config.terminalEnabled, isAdmin]);
+  }, [config.basePath, config.terminalEnabled, isAdmin, theme]);
 
   // Handle window resize
   useEffect(() => {
@@ -214,7 +231,9 @@ export default function TerminalPage() {
   if (!isAdmin) {
     return (
       <div className="flex items-center justify-center h-64">
-        <p className="text-muted-foreground">You do not have permission to access this page.</p>
+        <p className="text-muted-foreground">
+          You do not have permission to access this page.
+        </p>
       </div>
     );
   }
@@ -222,7 +241,9 @@ export default function TerminalPage() {
   if (!config.terminalEnabled) {
     return (
       <div className="flex items-center justify-center h-64">
-        <p className="text-muted-foreground">Terminal is not enabled. Set DAGU_TERMINAL_ENABLED=true to enable.</p>
+        <p className="text-muted-foreground">
+          Terminal is not enabled. Set DAGU_TERMINAL_ENABLED=true to enable.
+        </p>
       </div>
     );
   }
@@ -233,11 +254,14 @@ export default function TerminalPage() {
         <div>
           <h1 className="text-lg font-semibold">Terminal</h1>
           <p className="text-sm text-muted-foreground">
-            Interactive shell session on local server as {user?.username || 'admin'}
+            Interactive shell session on local server as{' '}
+            {user?.username || 'admin'}
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <span className={`inline-flex items-center px-2 py-0.5 text-xs rounded ${getStatusBadgeClass(connectionStatus)}`}>
+          <span
+            className={`inline-flex items-center px-2 py-0.5 text-xs rounded ${getStatusBadgeClass(connectionStatus)}`}
+          >
             {getStatusText(connectionStatus, errorMessage)}
           </span>
         </div>
@@ -249,7 +273,7 @@ export default function TerminalPage() {
       )}
       <div
         ref={termRef}
-        className="flex-1 rounded border bg-[#1e1e1e] min-h-0 overflow-hidden"
+        className="flex-1 rounded border bg-background min-h-0 overflow-hidden"
         style={{ minHeight: '400px' }}
       />
     </div>
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index 4260e504a..67d7d7f2e 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -1,374 +1,35 @@
 @import 'tailwindcss';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html,
-  body {
-    @apply bg-background text-foreground;
-    overflow: hidden;
-    height: 100%;
-  }
-}
-
-/* Custom sidebar color - force all descendants to use the custom text color */
-.custom-sidebar-color,
-.custom-sidebar-color * {
-  color: var(--sidebar-text) !important;
-}
-
-/* Override focus styles for select components */
-[data-slot='select-trigger'],
-[data-slot='select-content'],
-[data-slot='select-item'] {
-  outline: none;
-}
-
-/* Remove conflicting shadow overrides for select content and items */
-[data-slot='select-content'] {
-  box-shadow: none;
-}
-[data-slot='select-item'] {
-  box-shadow: none;
-  border: none;
-}
-
-/* Fix for tag filter select in DAG list page */
-.dag-list-tag-filter [data-slot='select-content'],
-.dag-list-tag-filter [data-slot='select-item'],
-.dag-list-tag-filter [data-slot='select-item'][data-highlighted],
-.dag-list-tag-filter [data-slot='select-item'][data-selected],
-.dag-list-tag-filter [data-slot='select-value'],
-.dag-list-tag-filter [data-slot='select-trigger'] {
-  color: var(--muted);
-}
-
-/* Style for highlighted/selected items */
-.dag-list-tag-filter [data-slot='select-item'][data-highlighted],
-.dag-list-tag-filter [data-slot='select-item'][data-selected] {
-  color: var(--text);
-}
-
-/* Ensure placeholder text is visible but slightly muted */
-.dag-list-tag-filter [data-placeholder] {
-  color: var(--muted);
-}
-
-[data-slot='select-item'][data-highlighted],
-[data-slot='select-item'][data-selected] {
-  background-color: var(--accent-surface);
-  color: var(--text);
-}
-
-/* Make the checkmark icon visible */
-[data-slot='select-item-indicator'] svg {
-  color: currentColor;
-  opacity: 1;
-}
 @import 'tw-animate-css';
 
-/* =============================================================================
-   TOKEN-BASED COLOR SYSTEM
-   Following the principle: semantic tokens backed by mode-specific values
-   Components reference only semantic tokens; theme swaps underlying values
-   ============================================================================= */
-
-:root {
-  /* -------------------------------------------------------------------------
-     LIGHT MODE - Professional Gray Theme
-     Clean, minimal, easy on the eyes
-     ------------------------------------------------------------------------- */
-
-  /* Text and emphasis */
-  --text: 30 30 32; /* near black, slightly warm */
-  --text-secondary: 30 30 32;
-  --text-secondary-alpha: 0.72;
-  --muted: 30 30 32;
-  --muted-alpha: 0.55;
-  --trace: 30 30 32;
-  --trace-alpha: 0.25;
-
-  /* Surfaces and borders */
-  --bg: 241 242 238; /* warm light gray - content area */
-  --accent-surface: 235 237 230; /* slightly darker warm gray */
-  --surface: 255 255 255; /* white - for cards, inputs */
-  --border: 210 212 204; /* warm gray border */
-  --border-bold: 190 192 184; /* darker border for emphasis */
-  --glass-bg: 241 242 238;
-  --glass-bg-alpha: 0.85;
-  --glass-border: 210 212 204;
-
-  /* Primary intent (vibrant orange) */
-  --primary: 234 88 12; /* orange-600 - bold, energetic */
-  --primary-highlight: 234 88 12;
-  --primary-highlight-alpha: 0.08;
-  --link: 59 130 246; /* blue-500 for links */
-  --primary-alt-highlight: 240 240 242;
-
-  /* Secondary intent */
-  --secondary: 229 231 235; /* gray-200 */
-  --secondary-alpha: 1;
-  --secondary-hover: 209 213 219; /* gray-300 */
-
-  /* Button component tokens - Sepia 3D Design */
-  /* Primary button - warm sepia gradient */
-  --btn-primary-top: 196 149 106; /* #c4956a - light sepia */
-  --btn-primary-bottom: 176 132 88; /* #b08458 - darker sepia */
-  --btn-primary-platform: 154 112 72; /* #9a7048 - platform shadow */
-  --btn-primary-hover-top: 212 165 122; /* #d4a57a - hover light */
-  --btn-primary-hover-bottom: 196 149 106; /* #c4956a - hover dark */
-
-  /* Secondary button - cream/warm white gradient */
-  --btn-secondary-top: 250 248 245; /* #faf8f5 - cream white */
-  --btn-secondary-bottom: 245 240 232; /* #f5f0e8 - warm off-white */
-  --btn-secondary-platform: 200 191 176; /* #c8bfb0 - warm gray */
-  --btn-secondary-border: 200 191 176; /* #c8bfb0 - warm gray border */
-  --btn-secondary-hover-border: 168 152 136; /* #a89888 - darker border */
-  --btn-secondary-hover-top: 255 255 255; /* pure white hover */
-  --btn-secondary-hover-bottom: 250 248 245; /* #faf8f5 hover */
-
-  /* Destructive button - muted red 3D */
-  --btn-destructive-top: 239 154 154; /* light red */
-  --btn-destructive-bottom: 220 120 120; /* medium red */
-  --btn-destructive-platform: 185 80 80; /* dark red platform */
-  --btn-destructive-border: 220 100 100;
-
-  /* Ghost/outline button platform for subtle depth */
-  --btn-ghost-platform: 210 212 204; /* warm gray */
-
-  /* Legacy tokens for compatibility */
-  --button-primary-bg: 196 149 106;
-  --button-primary-border: 154 112 72;
-  --button-primary-border-hover: 176 132 88;
-  --frame-primary-bg: 196 149 106;
-  --frame-secondary-bg: 250 248 245;
-  --button-secondary-bg: 250 248 245;
-  --button-secondary-border: 200 191 176;
-  --button-secondary-border-hover: 168 152 136;
-  --frame-danger-bg: 220 38 38;
-  --frame-danger-bg-alpha: 0.9;
-  --button-danger-border: 220 38 38;
-  --button-danger-border-hover: 185 28 28;
-
-  /* Status: Danger (muted red) */
-  --danger: 220 38 38; /* red-600 */
-  --danger-light: 248 113 113; /* red-400 */
-  --danger-lighter: 254 226 226; /* red-100 */
-  --danger-dark: 185 28 28; /* red-700 */
-  --danger-highlight: 220 38 38;
-  --danger-highlight-alpha: 0.08;
-
-  /* Status: Warning (muted amber) */
-  --warning: 217 119 6; /* amber-600 */
-  --warning-dark: 180 83 9; /* amber-700 */
-  --warning-highlight: 217 119 6;
-  --warning-highlight-alpha: 0.08;
-
-  /* Status: Success (muted green) */
-  --success: 22 163 74; /* green-600 */
-  --success-light: 74 222 128; /* green-400 */
-  --success-dark: 21 128 61; /* green-700 */
-  --success-highlight: 22 163 74;
-  --success-highlight-alpha: 0.08;
-
-  /* Status: Info (muted blue) */
-  --info: 37 99 235; /* blue-600 */
-  --info-light: 96 165 250; /* blue-400 */
-  --info-highlight: 37 99 235;
-  --info-highlight-alpha: 0.08;
-
-  /* Emphasis and selection */
-  --emphasis: 234 88 12;
-  --selection: 219 234 254; /* blue-100 */
-  --selection-alpha: 0.6;
-
-  /* Legacy neutral tokens (for compatibility) */
-  --text-muted-legacy: 107 114 128; /* gray-500 */
-  --text-muted-dark-legacy: 75 85 99; /* gray-600 */
-  --text-muted-alt-legacy: 107 114 128;
-
-  /* Code block colors */
-  --code-bg: 31 41 55; /* slate-800 */
-  --code-text: 243 244 246; /* gray-100 */
-
-  /* Data visualization palette (professional, muted) */
-  --chart-1: 59 130 246; /* blue-500 */
-  --chart-2: 34 197 94; /* green-500 */
-  --chart-3: 168 85 247; /* purple-500 */
-  --chart-4: 249 115 22; /* orange-500 */
-  --chart-5: 236 72 153; /* pink-500 */
-  --chart-6: 20 184 166; /* teal-500 */
-  --chart-7: 245 158 11; /* amber-500 */
-  --chart-8: 107 114 128; /* gray-500 */
-
-  /* Sidebar & Navbar */
-  --sidebar-bg: 229 231 223; /* rgb(229, 231, 223) - warm gray */
-  --sidebar-text: 30 30 32;
-  --sidebar-border: 200 202 194;
-  --sidebar-accent: 220 222 214;
-
-  /* Ring (focus) */
-  --ring: 59 130 246; /* blue-500 for focus */
-
-  /* Border radius */
-  --radius: 0.375rem;
-
-  /* -------------------------------------------------------------------------
-     SHADCN COMPATIBILITY MAPPINGS (light mode)
-     ------------------------------------------------------------------------- */
-  --background: rgb(var(--bg));
-  --foreground: rgb(var(--text));
-  --card: rgb(var(--surface));
-  --card-foreground: rgb(var(--text));
-  --popover: rgb(var(--surface));
-  --popover-foreground: rgb(var(--text));
-  --primary-color: rgb(var(--primary));
-  --primary-foreground: 255 255 255;
-  --secondary-color: rgb(var(--secondary));
-  --secondary-foreground: rgb(var(--text));
-  --muted-color: rgb(var(--accent-surface));
-  --muted-foreground: rgba(var(--text), var(--muted-alpha));
-  --accent: rgb(var(--accent-surface));
-  --accent-foreground: rgb(var(--text));
-  --destructive: rgb(var(--danger));
-  --destructive-foreground: 255 255 255;
-  --border-color: rgb(var(--border));
-  --input: rgb(var(--surface));
-  --ring-color: rgb(var(--ring));
-
-  /* Sidebar compatibility */
-  --sidebar: rgb(var(--sidebar-bg));
-  --sidebar-foreground: rgb(var(--sidebar-text));
-  --sidebar-primary: rgb(var(--primary));
-  --sidebar-primary-foreground: rgb(255 255 255);
-  --sidebar-accent: rgb(var(--sidebar-accent));
-  --sidebar-accent-foreground: rgb(var(--sidebar-text));
-  --sidebar-border: rgb(var(--sidebar-border));
-  --sidebar-ring: rgb(var(--ring));
-}
-
-/* Tailwind theme inline - maps CSS vars to Tailwind classes */
-@theme inline {
-  /* Core semantic colors */
-  --color-text: rgb(var(--text));
-  --color-text-secondary: rgba(
-    var(--text-secondary),
-    var(--text-secondary-alpha)
-  );
-  --color-muted: rgba(var(--muted), var(--muted-alpha));
-  --color-trace: rgba(var(--trace), var(--trace-alpha));
-
-  /* Surfaces */
-  --color-bg: rgb(var(--bg));
-  --color-surface: rgb(var(--surface));
-  --color-accent-surface: rgb(var(--accent-surface));
-  --color-glass-bg: rgba(var(--glass-bg), var(--glass-bg-alpha));
-  --color-glass-border: rgb(var(--glass-border));
-
-  /* Borders */
-  --color-border: rgb(var(--border));
-  --color-border-bold: rgb(var(--border-bold));
-
-  /* Primary intent */
-  --color-primary: rgb(var(--primary));
-  --color-primary-highlight: rgba(
-    var(--primary-highlight),
-    var(--primary-highlight-alpha)
-  );
-  --color-link: rgb(var(--link));
-  --color-primary-alt-highlight: rgb(var(--primary-alt-highlight));
-
-  /* Secondary */
-  --color-secondary: rgba(var(--secondary), var(--secondary-alpha));
-  --color-secondary-hover: rgb(var(--secondary-hover));
-
-  /* Button tokens */
-  --color-button-primary-bg: rgb(var(--button-primary-bg));
-  --color-button-primary-border: rgb(var(--button-primary-border));
-  --color-button-primary-border-hover: rgb(var(--button-primary-border-hover));
-  --color-frame-primary-bg: rgb(var(--frame-primary-bg));
-  --color-frame-secondary-bg: rgb(var(--frame-secondary-bg));
-  --color-button-secondary-bg: rgb(var(--button-secondary-bg));
-  --color-button-secondary-border: rgb(var(--button-secondary-border));
-  --color-button-secondary-border-hover: rgb(
-    var(--button-secondary-border-hover)
-  );
-  --color-frame-danger-bg: rgba(
-    var(--frame-danger-bg),
-    var(--frame-danger-bg-alpha)
-  );
-  --color-button-danger-border: rgb(var(--button-danger-border));
-  --color-button-danger-border-hover: rgb(var(--button-danger-border-hover));
-
-  /* Status: Danger */
-  --color-danger: rgb(var(--danger));
-  --color-danger-light: rgb(var(--danger-light));
-  --color-danger-lighter: rgb(var(--danger-lighter));
-  --color-danger-dark: rgb(var(--danger-dark));
-  --color-danger-highlight: rgba(
-    var(--danger-highlight),
-    var(--danger-highlight-alpha)
-  );
-
-  /* Status: Warning */
-  --color-warning: rgb(var(--warning));
-  --color-warning-dark: rgb(var(--warning-dark));
-  --color-warning-highlight: rgba(
-    var(--warning-highlight),
-    var(--warning-highlight-alpha)
-  );
-
-  /* Status: Success */
-  --color-success: rgb(var(--success));
-  --color-success-light: rgb(var(--success-light));
-  --color-success-dark: rgb(var(--success-dark));
-  --color-success-highlight: rgba(
-    var(--success-highlight),
-    var(--success-highlight-alpha)
-  );
-
-  /* Status: Info */
-  --color-info: rgb(var(--info));
-  --color-info-light: rgb(var(--info-light));
-  --color-info-highlight: rgba(
-    var(--info-highlight),
-    var(--info-highlight-alpha)
-  );
-
-  /* Emphasis and selection */
-  --color-emphasis: rgb(var(--emphasis));
-  --color-selection: rgba(var(--selection), var(--selection-alpha));
-
-  /* Code */
-  --color-code-bg: rgb(var(--code-bg));
-  --color-code-text: rgb(var(--code-text));
-
-  /* Charts / Data viz */
-  --color-chart-1: rgb(var(--chart-1));
-  --color-chart-2: rgb(var(--chart-2));
-  --color-chart-3: rgb(var(--chart-3));
-  --color-chart-4: rgb(var(--chart-4));
-  --color-chart-5: rgb(var(--chart-5));
-  --color-chart-6: rgb(var(--chart-6));
-  --color-chart-7: rgb(var(--chart-7));
-  --color-chart-8: rgb(var(--chart-8));
-
-  /* SHADCN COMPATIBILITY (for existing components) */
+@theme {
+  /* Core Obsidian Semantic Colors */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
+
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+
   --color-destructive: var(--destructive);
-  --color-destructive-foreground: rgb(var(--destructive-foreground));
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
   --color-input: var(--input);
-  --color-ring: var(--ring-color);
+  --color-ring: var(--ring);
 
   /* Sidebar */
   --color-sidebar: var(--sidebar);
@@ -381,324 +42,230 @@
   --color-sidebar-ring: var(--sidebar-ring);
 
   /* Radius */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+  --radius-lg: 12px;
+  --radius-md: 10px;
+  --radius-sm: 8px;
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+  /* Status Colors */
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  /* Font Family */
+  --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
 }
 
-@keyframes pulse {
-  0% {
-    opacity: 0.5;
-    transform: scale(0.8);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 0.5;
-    transform: scale(0.8);
+@layer base {
+  :root {
+    --background: #ffffff;
+    --foreground: #020617;
+    --card: #f8fafc;
+    --card-foreground: #020617;
+    --popover: #ffffff;
+    --popover-foreground: #020617;
+    --primary: #6366f1;
+    --primary-foreground: #ffffff;
+    --secondary: #f1f5f9;
+    --secondary-foreground: #020617;
+    --muted: #f1f5f9;
+    --muted-foreground: #64748b;
+    --accent: #f1f5f9;
+    --accent-foreground: #020617;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --border: #e2e8f0;
+    --input: #e2e8f0;
+    --ring: #6366f1;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --info: #0ea5e9;
+
+    --sidebar: #f8fafc;
+    --sidebar-foreground: #475569;
+    --sidebar-border: #e2e8f0;
+
+    /* Button Tokens mapping */
+    --btn-primary-top: #6366f1;
+    --btn-primary-bottom: #4f46e5;
+    --btn-primary-border: #4338ca;
+
+    --btn-secondary-top: #ffffff;
+    --btn-secondary-bottom: #f8fafc;
+    --btn-secondary-border: #e2e8f0;
+    --btn-secondary-platform: #cbd5e1;
+
+    /* RGB fallbacks for legacy components */
+    --bg: 255 255 255;
+    --text: 2 6 23;
+    --sidebar-bg: 248 250 252;
+    --sidebar-text: 71 85 105;
   }
-}
 
-@keyframes slideInFromRight {
-  0% {
-    transform: translateX(40%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
+  .dark {
+    --background: #020617;
+    --foreground: #f8fafc;
+    --card: #0b0f1a;
+    --card-foreground: #f8fafc;
+    --popover: #0f172a;
+    --popover-foreground: #f8fafc;
+    --primary: #818cf8;
+    --primary-foreground: #ffffff;
+    --secondary: #1e293b;
+    --secondary-foreground: #f8fafc;
+    --muted: #0f172a;
+    --muted-foreground: #94a3b8;
+    --accent: #1e293b;
+    --accent-foreground: #f8fafc;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --border: rgba(255, 255, 255, 0.08);
+    --input: rgba(255, 255, 255, 0.08);
+    --ring: #6366f1;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --info: #0ea5e9;
+
+    --sidebar: #020617;
+    --sidebar-foreground: #94a3b8;
+    --sidebar-border: rgba(255, 255, 255, 0.08);
+
+    /* Button Tokens mapping - Obsidian Dark */
+    --btn-primary-top: #818cf8;
+    --btn-primary-bottom: #6366f1;
+    --btn-primary-border: #4f46e5;
+
+    --btn-secondary-top: #1e293b;
+    --btn-secondary-bottom: #0f172a;
+    --btn-secondary-border: rgba(255, 255, 255, 0.1);
+    --btn-secondary-platform: #020617;
+
+    /* RGB fallbacks */
+    --bg: 2 6 23;
+    --text: 248 250 252;
+    --sidebar-bg: 2 6 23;
+    --sidebar-text: 148 163 184;
   }
-}
-
-.slide-in-from-right {
-  animation: slideInFromRight 0.2s ease-out;
-}
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+  * {
+    @apply border-border;
   }
-}
-
-.fade-in {
-  animation: fadeIn 0.5s ease-in-out;
-}
 
-@keyframes matrix-glow {
-  0%,
-  100% {
-    text-shadow: 0 0 2px currentColor;
-  }
-  50% {
-    text-shadow:
-      0 0 6px currentColor,
-      0 0 10px currentColor;
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    letter-spacing: -0.011em;
   }
 }
 
-.matrix-glow {
-  animation: matrix-glow 1.5s ease-in-out infinite;
-}
-
-/* Disable text selection for elements with this class */
-.no-text-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* Log viewer text selection - ensure visible selection on dark backgrounds */
-.log-content::selection,
-.log-content *::selection {
-  background-color: #3b82f6 !important;
-  color: #ffffff !important;
-}
-
-.log-content::-moz-selection,
-.log-content *::-moz-selection {
-  background-color: #3b82f6 !important;
-  color: #ffffff !important;
-}
-
-/* Enhanced line highlighting for search results and code displays */
-.line-highlight {
-  background: linear-gradient(
-    to right,
-    rgba(var(--primary), 0.2) 70%,
-    rgba(var(--primary), 0.05)
-  ) !important;
+/* Base Button Redesign - Clean, sharp, consistent */
+.btn-3d-primary,
+.btn-3d-secondary,
+.btn-3d-outline,
+.btn-3d-destructive {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 8px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  outline: none;
 }
 
-/* =============================================================================
-   CLASSIC 3D BUTTON SYSTEM
-   Tactile, raised buttons with refined depth - classic desktop feel
-   ============================================================================= */
-
-/* Primary Button - Warm sepia with classic 3D depth */
 .btn-3d-primary {
   background: linear-gradient(
-    180deg,
-    rgb(var(--btn-primary-top)) 0%,
-    rgb(var(--btn-primary-bottom)) 100%
+    to bottom,
+    var(--btn-primary-top),
+    var(--btn-primary-bottom)
   );
-  color: white;
-  border: none;
-  border-bottom: 3px solid rgb(var(--btn-primary-platform));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  transition: all 0.1s ease;
+  color: #fff;
+  border-color: var(--btn-primary-border);
+  box-shadow:
+    0 4px 0 0 var(--btn-primary-border),
+    0 8px 15px -4px rgba(99, 102, 241, 0.4);
 }
-
 .btn-3d-primary:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-primary-hover-top)) 0%,
-    rgb(var(--btn-primary-hover-bottom)) 100%
-  );
   transform: translateY(-1px);
-  border-bottom-width: 4px;
+  box-shadow:
+    0 5px 0 0 var(--btn-primary-border),
+    0 10px 20px -5px rgba(99, 102, 241, 0.5);
+  filter: brightness(1.05);
 }
-
 .btn-3d-primary:active {
-  transform: translateY(2px);
-  border-bottom-width: 1px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  transform: translateY(3px);
+  box-shadow: 0 1px 0 0 var(--btn-primary-border);
 }
 
-/* Secondary/Default Button - Cream with refined 3D */
 .btn-3d-secondary {
   background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-top)) 0%,
-    rgb(var(--btn-secondary-bottom)) 100%
+    to bottom,
+    var(--btn-secondary-top),
+    var(--btn-secondary-bottom)
   );
-  color: rgb(var(--text));
-  border: 1px solid rgb(var(--btn-secondary-border));
-  border-bottom: 3px solid rgb(var(--btn-secondary-platform));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  transition: all 0.1s ease;
+  color: var(--foreground);
+  border-color: var(--btn-secondary-border);
+  box-shadow:
+    0 4px 0 0 var(--btn-secondary-platform),
+    0 4px 10px -2px rgba(0, 0, 0, 0.1);
 }
-
 .btn-3d-secondary:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-hover-top)) 0%,
-    rgb(var(--btn-secondary-hover-bottom)) 100%
-  );
   transform: translateY(-1px);
-  border-bottom-width: 4px;
+  filter: brightness(1.02);
+  box-shadow:
+    0 5px 0 0 var(--btn-secondary-platform),
+    0 6px 15px -3px rgba(0, 0, 0, 0.1);
 }
-
 .btn-3d-secondary:active {
-  transform: translateY(2px);
-  border-bottom-width: 1px;
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
+  transform: translateY(3px);
+  box-shadow: 0 1px 0 0 var(--btn-secondary-platform);
 }
 
-/* Outline Button - Same style as secondary */
-.btn-3d-outline {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-top)) 0%,
-    rgb(var(--btn-secondary-bottom)) 100%
-  );
-  color: rgb(var(--text));
-  border: 1px solid rgb(var(--btn-secondary-border));
-  border-bottom: 3px solid rgb(var(--btn-secondary-platform));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  transition: all 0.1s ease;
-}
-
-.btn-3d-outline:hover {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-secondary-hover-top)) 0%,
-    rgb(var(--btn-secondary-hover-bottom)) 100%
-  );
-  transform: translateY(-1px);
-  border-bottom-width: 4px;
-}
-
-.btn-3d-outline:active {
-  transform: translateY(2px);
-  border-bottom-width: 1px;
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
-}
-
-/* Ghost Button - Subtle, appears on hover */
 .btn-3d-ghost {
-  background: transparent;
-  color: rgb(var(--text));
-  border: none;
-  border-bottom: 2px solid transparent;
-  transition: all 0.1s ease;
-}
-
-.btn-3d-ghost:hover {
-  background: rgba(var(--btn-secondary-top), 0.8);
-  border: 1px solid rgba(var(--btn-secondary-border), 0.5);
-  border-bottom: 2px solid rgba(var(--btn-secondary-platform), 0.5);
-}
-
-.btn-3d-ghost:active {
-  transform: translateY(1px);
-  border-bottom-width: 1px;
-  background: rgba(var(--btn-secondary-bottom), 0.9);
+  @apply text-muted-foreground hover:text-foreground hover:bg-white/5;
 }
 
-/* Destructive Button - Soft red with 3D depth */
-.btn-3d-destructive {
-  background: linear-gradient(
-    180deg,
-    rgb(var(--btn-destructive-top)) 0%,
-    rgb(var(--btn-destructive-bottom)) 100%
-  );
-  color: #5c1a1a;
-  border: 1px solid rgb(var(--btn-destructive-border));
-  border-bottom: 3px solid rgb(var(--btn-destructive-platform));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
-  transition: all 0.1s ease;
+/* Table Style Fixes */
+[data-slot='card'] {
+  background: var(--card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 12px !important;
 }
 
-.btn-3d-destructive:hover {
-  background: linear-gradient(
-    180deg,
-    #f8aaaa 0%,
-    rgb(var(--btn-destructive-top)) 100%
-  );
-  transform: translateY(-1px);
-  border-bottom-width: 4px;
+.dark [data-slot='card'] {
+  background: linear-gradient(to bottom right, #0b0f1a, #020617) !important;
 }
 
-.btn-3d-destructive:active {
-  transform: translateY(2px);
-  border-bottom-width: 1px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
+/* Glass Panels */
+.glass-panel {
+  background: rgba(var(--bg), 0.7);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border);
 }
 
-/* Link variant - text only */
-.btn-3d-link {
-  background: transparent;
-  color: rgb(var(--link));
-  border: none;
-  text-decoration: underline;
-  text-underline-offset: 3px;
+/* Typography densities */
+.text-balance {
+  text-wrap: balance;
 }
-
-.btn-3d-link:hover {
-  color: rgb(var(--primary));
+.tracking-tight {
+  letter-spacing: -0.025em;
 }
 
-/* Disabled state */
-.btn-3d-primary:disabled,
-.btn-3d-secondary:disabled,
-.btn-3d-outline:disabled,
-.btn-3d-ghost:disabled,
-.btn-3d-destructive:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  transform: none !important;
-  border-bottom-width: 2px !important;
+/* Status Indicators */
+.status-pill {
+  @apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
 }
-
-/* Focus ring */
-.btn-3d-primary:focus-visible,
-.btn-3d-secondary:focus-visible,
-.btn-3d-outline:focus-visible,
-.btn-3d-ghost:focus-visible,
-.btn-3d-destructive:focus-visible {
-  outline: 2px solid rgba(var(--primary), 0.5);
-  outline-offset: 2px;
+.status-success {
+  @apply bg-success/10 text-success border border-success/20;
 }
-
-/* =============================================================================
-   RUNNING STATE ANIMATION
-   Futuristic soft shimmer effect for running DAG rows
-   ============================================================================= */
-
-@keyframes running-shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
+.status-failed {
+  @apply bg-destructive/10 text-destructive border border-destructive/20;
 }
-
-.animate-running-row {
-  position: relative;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(34, 197, 94, 0.03) 25%,
-    rgba(34, 197, 94, 0.06) 50%,
-    rgba(34, 197, 94, 0.03) 75%,
-    transparent 100%
-  );
-  background-size: 200% 100%;
-  animation: running-shimmer 5s ease-in-out infinite;
+.status-running {
+  @apply bg-primary/10 text-primary border border-primary/20 animate-pulse;
 }
diff --git a/ui/src/ui/StatusChip.tsx b/ui/src/ui/StatusChip.tsx
index 02d6055f9..749973224 100644
--- a/ui/src/ui/StatusChip.tsx
+++ b/ui/src/ui/StatusChip.tsx
@@ -11,61 +11,31 @@ type Props = {
 
 function StatusChip({ status, children, size = 'md' }: Props) {
   // Determine the colors and icon based on status
-  let bgColorClass = '';
-  let textColorClass = '';
-  let borderColorClass = '';
+  let statusClass = '';
   const isRunning = status === Status.Running;
 
   switch (status) {
-    case Status.Success: // done -> muted green (sepia-compatible)
-      bgColorClass = 'bg-[rgba(107,168,107,0.12)]';
-      borderColorClass = 'border-[#6ba86b]';
-      textColorClass = 'text-[#5a8a5a]';
+    case Status.Success:
+      statusClass = 'status-success';
       break;
-    case Status.Failed: // error -> warm coral red (sepia-compatible)
-      bgColorClass = 'bg-[rgba(196,114,106,0.12)]';
-      borderColorClass = 'border-[#c4726a]';
-      textColorClass = 'text-[#b05a52]';
+    case Status.Failed:
+    case Status.Rejected:
+      statusClass = 'status-failed';
       break;
-    case Status.Running: // running -> accent green (sepia-compatible)
-      bgColorClass = 'bg-[rgba(125,168,125,0.15)]';
-      borderColorClass = 'border-[#7da87d]';
-      textColorClass = 'text-[#6b9a6b]';
+    case Status.Running:
+      statusClass = 'status-running';
       break;
-    case Status.Aborted: // aborted -> muted coral/pink (sepia-compatible)
-      bgColorClass = 'bg-[rgba(212,132,122,0.12)]';
-      borderColorClass = 'border-[#d4847a]';
-      textColorClass = 'text-[#c06a62]';
+    case Status.Queued:
+    case Status.NotStarted:
+      statusClass = 'status-info';
       break;
-    case Status.NotStarted: // none -> slate blue (sepia-compatible)
-      bgColorClass = 'bg-[rgba(138,159,196,0.12)]';
-      borderColorClass = 'border-[#8a9fc4]';
-      textColorClass = 'text-[#6a7fa4]';
+    case Status.PartialSuccess:
+    case Status.Waiting:
+    case Status.Aborted:
+      statusClass = 'status-warning';
       break;
-    case Status.Queued: // queued -> muted purple (sepia-compatible)
-      bgColorClass = 'bg-[rgba(154,122,196,0.12)]';
-      borderColorClass = 'border-[#9a7ac4]';
-      textColorClass = 'text-[#7a5aa4]';
-      break;
-    case Status.PartialSuccess: // partial success -> warm amber (sepia-compatible)
-      bgColorClass = 'bg-[rgba(212,148,106,0.12)]';
-      borderColorClass = 'border-[#d4946a]';
-      textColorClass = 'text-[#c47a4a]';
-      break;
-    case Status.Waiting: // waiting for approval -> amber/yellow (attention-grabbing)
-      bgColorClass = 'bg-[rgba(245,158,11,0.15)]';
-      borderColorClass = 'border-[#f59e0b]';
-      textColorClass = 'text-[#d97706]';
-      break;
-    case Status.Rejected: // rejected -> coral/red (sepia-compatible)
-      bgColorClass = 'bg-[rgba(220,38,38,0.12)]';
-      borderColorClass = 'border-[#dc2626]';
-      textColorClass = 'text-[#b91c1c]';
-      break;
-    default: // Fallback to warm gray (sepia-compatible)
-      bgColorClass = 'bg-[rgba(168,160,152,0.12)]';
-      borderColorClass = 'border-[#a8a098]';
-      textColorClass = 'text-[#6b635a]';
+    default:
+      statusClass = 'status-muted';
   }
 
   // Size classes
@@ -76,25 +46,18 @@ function StatusChip({ status, children, size = 'md' }: Props) {
     lg: 'text-base py-1.5 px-4',
   };
 
-  // Render a pill-shaped badge with icon and text
+  // Render a pill-shaped badge with text
   return (
     <div
       className={cn(
-        'inline-flex items-center rounded-full border',
-        bgColorClass,
-        borderColorClass,
-        textColorClass,
+        'inline-flex items-center rounded-full border font-bold uppercase tracking-wider',
+        statusClass,
         sizeClasses[size]
       )}
     >
-      <span
-        className={cn(
-          'font-normal break-keep text-nowrap whitespace-nowrap',
-          textColorClass
-        )}
-      >
+      <span className="font-bold break-keep text-nowrap whitespace-nowrap">
         {isRunning && typeof children === 'string' ? (
-          <MatrixText text={children} className={textColorClass} />
+          <MatrixText text={children} />
         ) : (
           children
         )}
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index cbd8f4d24..479e54b2a 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -10,141 +10,8 @@ module.exports = {
       },
     },
     extend: {
-      colors: {
-        /* Core semantic colors */
-        text: 'rgb(var(--text))',
-        'text-secondary': 'rgba(var(--text-secondary), var(--text-secondary-alpha))',
-        muted: 'rgba(var(--muted), var(--muted-alpha))',
-        trace: 'rgba(var(--trace), var(--trace-alpha))',
-
-        /* Surfaces */
-        bg: 'rgb(var(--bg))',
-        surface: 'rgb(var(--surface))',
-        'accent-surface': 'rgb(var(--accent-surface))',
-        'glass-bg': 'rgba(var(--glass-bg), var(--glass-bg-alpha))',
-        'glass-border': 'rgb(var(--glass-border))',
-
-        /* Borders */
-        border: 'rgb(var(--border))',
-        'border-bold': 'rgb(var(--border-bold))',
-
-        /* Primary intent */
-        primary: {
-          DEFAULT: 'rgb(var(--primary))',
-          highlight: 'rgba(var(--primary-highlight), var(--primary-highlight-alpha))',
-          'alt-highlight': 'rgb(var(--primary-alt-highlight))',
-          foreground: 'rgb(var(--primary-foreground))',
-        },
-        link: 'rgb(var(--link))',
-
-        /* Secondary intent */
-        secondary: {
-          DEFAULT: 'rgba(var(--secondary), var(--secondary-alpha))',
-          hover: 'rgb(var(--secondary-hover))',
-          foreground: 'rgb(var(--secondary-foreground))',
-        },
-
-        /* Button component tokens */
-        'button-primary-bg': 'rgb(var(--button-primary-bg))',
-        'button-primary-border': 'rgb(var(--button-primary-border))',
-        'button-primary-border-hover': 'rgb(var(--button-primary-border-hover))',
-        'frame-primary-bg': 'rgb(var(--frame-primary-bg))',
-        'frame-secondary-bg': 'rgb(var(--frame-secondary-bg))',
-        'button-secondary-bg': 'rgb(var(--button-secondary-bg))',
-        'button-secondary-border': 'rgb(var(--button-secondary-border))',
-        'button-secondary-border-hover': 'rgb(var(--button-secondary-border-hover))',
-        'frame-danger-bg': 'rgba(var(--frame-danger-bg), var(--frame-danger-bg-alpha))',
-        'button-danger-border': 'rgb(var(--button-danger-border))',
-        'button-danger-border-hover': 'rgb(var(--button-danger-border-hover))',
-
-        /* Status: Danger */
-        danger: {
-          DEFAULT: 'rgb(var(--danger))',
-          light: 'rgb(var(--danger-light))',
-          lighter: 'rgb(var(--danger-lighter))',
-          dark: 'rgb(var(--danger-dark))',
-          highlight: 'rgba(var(--danger-highlight), var(--danger-highlight-alpha))',
-        },
-
-        /* Status: Warning */
-        warning: {
-          DEFAULT: 'rgb(var(--warning))',
-          dark: 'rgb(var(--warning-dark))',
-          highlight: 'rgba(var(--warning-highlight), var(--warning-highlight-alpha))',
-        },
-
-        /* Status: Success */
-        success: {
-          DEFAULT: 'rgb(var(--success))',
-          light: 'rgb(var(--success-light))',
-          dark: 'rgb(var(--success-dark))',
-          highlight: 'rgba(var(--success-highlight), var(--success-highlight-alpha))',
-        },
-
-        /* Status: Info */
-        info: {
-          DEFAULT: 'rgb(var(--info))',
-          light: 'rgb(var(--info-light))',
-          highlight: 'rgba(var(--info-highlight), var(--info-highlight-alpha))',
-        },
-
-        /* Emphasis and selection */
-        emphasis: 'rgb(var(--emphasis))',
-        selection: 'rgba(var(--selection), var(--selection-alpha))',
-
-        /* Code */
-        'code-bg': 'rgb(var(--code-bg))',
-        'code-text': 'rgb(var(--code-text))',
-
-        /* Charts / Data viz */
-        'chart-1': 'rgb(var(--chart-1))',
-        'chart-2': 'rgb(var(--chart-2))',
-        'chart-3': 'rgb(var(--chart-3))',
-        'chart-4': 'rgb(var(--chart-4))',
-        'chart-5': 'rgb(var(--chart-5))',
-        'chart-6': 'rgb(var(--chart-6))',
-        'chart-7': 'rgb(var(--chart-7))',
-        'chart-8': 'rgb(var(--chart-8))',
-
-        /* SHADCN COMPATIBILITY */
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
-        card: {
-          DEFAULT: 'var(--card)',
-          foreground: 'var(--card-foreground)',
-        },
-        popover: {
-          DEFAULT: 'var(--popover)',
-          foreground: 'var(--popover-foreground)',
-        },
-        destructive: {
-          DEFAULT: 'var(--destructive)',
-          foreground: 'rgb(var(--destructive-foreground))',
-        },
-        accent: {
-          DEFAULT: 'var(--accent)',
-          foreground: 'var(--accent-foreground)',
-        },
-        input: 'var(--input)',
-        ring: 'rgb(var(--ring))',
-
-        /* Sidebar */
-        sidebar: {
-          DEFAULT: 'var(--sidebar)',
-          foreground: 'var(--sidebar-foreground)',
-          primary: 'var(--sidebar-primary)',
-          'primary-foreground': 'var(--sidebar-primary-foreground)',
-          accent: 'var(--sidebar-accent)',
-          'accent-foreground': 'var(--sidebar-accent-foreground)',
-          border: 'var(--sidebar-border)',
-          ring: 'var(--sidebar-ring)',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
+      // Theme is now primarily defined in src/styles/global.css via @theme
+      // This config remains for content paths and container settings
     },
   },
   plugins: [],

From cb3759db98efccb37843e88d7204d777bbcc4062 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sat, 17 Jan 2026 22:18:14 +0900
Subject: [PATCH 02/19] improve ui

---
 ui/src/components/TabBar.css                  |  15 +-
 ui/src/components/ui/dialog.tsx               |  21 +-
 ui/src/components/ui/simple-toast.tsx         |  15 +-
 ui/src/components/ui/switch.css               |  67 ++++
 ui/src/components/ui/switch.tsx               |  24 +-
 ui/src/components/ui/table.tsx                |   2 +-
 ui/src/components/ui/tabs.tsx                 |  40 +-
 ui/src/consts.ts                              |  40 +-
 .../dag-run-details/DAGRunDetailsModal.tsx    |  41 +-
 .../dags/components/common/LinkTab.tsx        |   1 +
 .../dags/components/common/LiveSwitch.tsx     |  60 ++-
 .../dags/components/common/ModalLinkTab.tsx   |   1 +
 .../components/dag-details/WebhookTab.tsx     |  58 ++-
 .../dags/components/dag-list/DAGTable.tsx     |  59 ++-
 .../dags/components/visualization/Graph.tsx   |  22 +-
 .../visualization/TimelineChart.tsx           |  56 ++-
 .../components/DashboardTimechart.tsx         |   6 +-
 .../features/queues/components/QueueCard.tsx  |   9 +-
 .../features/queues/components/QueueList.tsx  |   6 +-
 .../system-status/components/PathsCard.tsx    |  26 +-
 ui/src/layouts/Layout.tsx                     |   2 +-
 ui/src/menu.tsx                               |   8 +-
 ui/src/pages/api-keys/index.tsx               |  80 ++--
 ui/src/pages/audit-logs/index.tsx             | 371 +++++++++++-------
 ui/src/pages/system-status/index.tsx          |   5 +-
 ui/src/pages/terminal/index.tsx               |  10 +-
 ui/src/pages/users/index.tsx                  | 139 ++++---
 ui/src/pages/webhooks/index.tsx               |  97 +++--
 ui/src/pages/workers/index.tsx                | 103 +++--
 ui/src/styles/global.css                      | 116 ++++--
 30 files changed, 998 insertions(+), 502 deletions(-)
 create mode 100644 ui/src/components/ui/switch.css

diff --git a/ui/src/components/TabBar.css b/ui/src/components/TabBar.css
index 75edf039f..276583340 100644
--- a/ui/src/components/TabBar.css
+++ b/ui/src/components/TabBar.css
@@ -21,20 +21,25 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 12px;
+  padding: 8px 12px;
   min-width: 80px;
   max-width: 200px;
   flex: 0 1 auto;
   cursor: pointer;
   user-select: none;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
   border: 1px solid var(--btn-secondary-border);
-  border-bottom: none;
+  border-bottom: 2px solid transparent;
   border-radius: 8px 8px 0 0;
   background: var(--muted);
   color: var(--muted-foreground);
-  transition: all 0.2s ease;
+  margin-bottom: -2px;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
   outline: none;
 }
 
@@ -48,9 +53,7 @@
   color: var(--foreground);
   border-color: var(--border);
   border-bottom: 2px solid var(--background);
-  margin-bottom: -2px;
   z-index: 10;
-  font-weight: 600;
   box-shadow: 0 -4px 12px -4px rgba(0, 0, 0, 0.1);
 }
 
diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
index 4f4785872..bbb074791 100644
--- a/ui/src/components/ui/dialog.tsx
+++ b/ui/src/components/ui/dialog.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Theme } from '@radix-ui/themes';
 import { X } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -37,12 +37,17 @@ const DialogContent = React.forwardRef<
   }
 >(({ className, children, hideCloseButton, ...props }, ref) => (
   <DialogPortal>
-    <Theme appearance="light" accentColor="gray" grayColor="slate" radius="medium">
+    <Theme
+      appearance="inherit"
+      accentColor="gray"
+      grayColor="slate"
+      radius="medium"
+    >
       <DialogOverlay />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-indigo-500/30 bg-background p-6 shadow-2xl shadow-indigo-500/10 duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg',
           className
         )}
         {...props}
@@ -117,13 +122,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 };
diff --git a/ui/src/components/ui/simple-toast.tsx b/ui/src/components/ui/simple-toast.tsx
index f4e736b17..4999d7b0b 100644
--- a/ui/src/components/ui/simple-toast.tsx
+++ b/ui/src/components/ui/simple-toast.tsx
@@ -17,7 +17,9 @@ export const SimpleToast: React.FC<SimpleToastProps> = ({
   onClose,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  const [animationState, setAnimationState] = useState<'entering' | 'visible' | 'exiting'>('entering');
+  const [animationState, setAnimationState] = useState<
+    'entering' | 'visible' | 'exiting'
+  >('entering');
   const [checkAnimated, setCheckAnimated] = useState(false);
 
   // Ensure duration is at least MIN_DURATION
@@ -73,14 +75,15 @@ export const SimpleToast: React.FC<SimpleToastProps> = ({
           pointer-events-auto
           flex flex-col items-center justify-center gap-3
           w-32 h-32
-          bg-black/70 dark:bg-black/80
+          bg-popover/80
           backdrop-blur-xl
           rounded-[20px]
+          border border-border/50
           transition-all duration-300 ease-out
           ${getAnimationClasses()}
         `}
         style={{
-          boxShadow: '0 8px 32px rgba(0,0,0,0.3), inset 0 0 0 0.5px rgba(255,255,255,0.1)',
+          boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
         }}
       >
         {/* Animated checkmark circle */}
@@ -89,7 +92,7 @@ export const SimpleToast: React.FC<SimpleToastProps> = ({
           <div
             className={`
               absolute inset-0 rounded-full
-              border-[2.5px] border-green-400
+              border-[2.5px] border-success
               transition-all duration-300 ease-out
               ${checkAnimated ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}
             `}
@@ -102,14 +105,14 @@ export const SimpleToast: React.FC<SimpleToastProps> = ({
               ${checkAnimated ? 'opacity-100 scale-100' : 'opacity-0 scale-50'}
             `}
           >
-            <Check className="h-7 w-7 text-green-400" strokeWidth={3} />
+            <Check className="h-7 w-7 text-success" strokeWidth={3} />
           </div>
         </div>
 
         {/* Message */}
         <span
           className={`
-            text-[13px] font-medium text-white/90 text-center px-2
+            text-[13px] font-medium text-foreground/90 text-center px-2
             transition-all duration-200 delay-150
             ${checkAnimated ? 'opacity-100' : 'opacity-0'}
           `}
diff --git a/ui/src/components/ui/switch.css b/ui/src/components/ui/switch.css
new file mode 100644
index 000000000..2ae7763fa
--- /dev/null
+++ b/ui/src/components/ui/switch.css
@@ -0,0 +1,67 @@
+/* Switch Component Styles */
+
+.switch-root {
+  display: inline-flex;
+  height: 1.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+
+.switch-root:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+.switch-root:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Light mode - unchecked */
+.switch-root {
+  background-color: #cbd5e1; /* slate-300 */
+}
+
+/* Light mode - checked */
+.switch-root[data-state='checked'] {
+  background-color: var(--primary);
+}
+
+/* Dark mode - unchecked */
+.dark .switch-root {
+  background-color: #334155; /* slate-700 */
+}
+
+/* Dark mode - checked */
+.dark .switch-root[data-state='checked'] {
+  background-color: var(--primary);
+}
+
+/* Thumb styles */
+.switch-thumb {
+  pointer-events: none;
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+}
+
+.switch-thumb[data-state='unchecked'] {
+  transform: translateX(2px);
+}
+
+.switch-thumb[data-state='checked'] {
+  transform: translateX(18px);
+}
+
+/* Dark mode thumb */
+.dark .switch-thumb {
+  background-color: #e2e8f0; /* slate-200 */
+}
diff --git a/ui/src/components/ui/switch.tsx b/ui/src/components/ui/switch.tsx
index a17067fbf..50379b08f 100644
--- a/ui/src/components/ui/switch.tsx
+++ b/ui/src/components/ui/switch.tsx
@@ -1,7 +1,9 @@
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
+
+import './switch.css';
 
 function Switch({
   className,
@@ -10,23 +12,15 @@ function Switch({
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
-      className={cn(
-        "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        "bg-gray-300 data-[state=checked]:bg-primary",
-        "dark:bg-gray-600 dark:data-[state=checked]:bg-primary",
-        className
-      )}
+      className={cn('switch-root', className)}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className={cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md transition-transform",
-          "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-[18px]"
-        )}
+        className="switch-thumb"
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/ui/src/components/ui/table.tsx b/ui/src/components/ui/table.tsx
index cfc1ee2ac..b83a7eacc 100644
--- a/ui/src/components/ui/table.tsx
+++ b/ui/src/components/ui/table.tsx
@@ -9,7 +9,7 @@ function Table({
   ...props
 }: React.ComponentProps<typeof RadixTable.Root>) {
   return (
-    <div className="w-full overflow-hidden border border-border/50">
+    <div className="w-full overflow-hidden">
       <RadixTable.Root
         data-slot="table"
         variant="ghost"
diff --git a/ui/src/components/ui/tabs.tsx b/ui/src/components/ui/tabs.tsx
index 222323ea6..5f6bfb3ef 100644
--- a/ui/src/components/ui/tabs.tsx
+++ b/ui/src/components/ui/tabs.tsx
@@ -8,39 +8,45 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function Tabs({ className, children, ...props }: Omit<TabsProps, 'value'>) {
   return (
-    <div
-      className={cn('inline-flex items-center gap-1', className)}
-      {...props}
-    >
+    <div className={cn('inline-flex items-center gap-1', className)} {...props}>
       {children}
     </div>
   );
 }
 
-interface TabProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface TabProps extends React.HTMLAttributes<HTMLElement> {
   value: string;
   isActive?: boolean;
+  asChild?: boolean;
 }
 
 function Tab({
   className,
   isActive,
   children,
+  asChild = false,
   ...props
 }: Omit<TabProps, 'value'>) {
+  const classes = cn(
+    'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-semibold',
+    'transition-colors duration-200 ease-in-out focus-visible:outline-none',
+    'disabled:pointer-events-none disabled:opacity-50',
+    isActive
+      ? 'text-primary border-b-2 border-primary [&_svg]:text-primary'
+      : 'text-muted-foreground hover:text-foreground border-b-2 border-transparent',
+    className
+  );
+
+  if (asChild) {
+    return (
+      <span className={classes} {...props}>
+        {children}
+      </span>
+    );
+  }
+
   return (
-    <button
-      className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium',
-        'transition-all duration-200 ease-in-out focus-visible:outline-none',
-        'disabled:pointer-events-none disabled:opacity-50',
-        isActive
-          ? 'text-primary font-semibold border-b-2 border-primary [&_svg]:text-primary'
-          : 'text-foreground hover:text-foreground/80 border-b-2 border-transparent',
-        className
-      )}
-      {...props}
-    >
+    <button className={classes} {...props}>
       {children}
     </button>
   );
diff --git a/ui/src/consts.ts b/ui/src/consts.ts
index f64528dc8..61f511d78 100644
--- a/ui/src/consts.ts
+++ b/ui/src/consts.ts
@@ -11,13 +11,34 @@ type statusColorMapping = {
 };
 
 export const statusColorMapping: statusColorMapping = {
-  [Status.NotStarted]: { backgroundColor: '#6b7280', color: 'white' }, // gray-500
-  [Status.Running]: { backgroundColor: '#16a34a', color: 'white' }, // green-600
-  [Status.Failed]: { backgroundColor: '#dc2626', color: 'white' }, // red-600
-  [Status.Aborted]: { backgroundColor: '#d97706', color: 'white' }, // amber-600
-  [Status.Success]: { backgroundColor: '#16a34a', color: 'white' }, // green-600
-  [Status.PartialSuccess]: { backgroundColor: '#ca8a04', color: 'white' }, // yellow-600
-  [Status.Rejected]: { backgroundColor: '#b91c1c', color: 'white' }, // red-700
+  [Status.NotStarted]: {
+    backgroundColor: 'var(--muted)',
+    color: 'var(--muted-foreground)',
+  },
+  [Status.Running]: {
+    backgroundColor: 'var(--success)',
+    color: 'var(--primary-foreground)',
+  },
+  [Status.Failed]: {
+    backgroundColor: 'var(--destructive)',
+    color: 'var(--destructive-foreground)',
+  },
+  [Status.Aborted]: {
+    backgroundColor: 'var(--warning)',
+    color: 'var(--primary-foreground)',
+  },
+  [Status.Success]: {
+    backgroundColor: 'var(--success)',
+    color: 'var(--primary-foreground)',
+  },
+  [Status.PartialSuccess]: {
+    backgroundColor: 'var(--warning)',
+    color: 'var(--primary-foreground)',
+  },
+  [Status.Rejected]: {
+    backgroundColor: 'var(--destructive)',
+    color: 'var(--destructive-foreground)',
+  },
 };
 
 export const nodeStatusColorMapping = {
@@ -26,7 +47,10 @@ export const nodeStatusColorMapping = {
   [NodeStatus.Failed]: statusColorMapping[Status.Failed],
   [NodeStatus.Aborted]: statusColorMapping[Status.Aborted],
   [NodeStatus.Success]: statusColorMapping[Status.Success],
-  [NodeStatus.Skipped]: { backgroundColor: '#9ca3af', color: 'white' }, // gray-400
+  [NodeStatus.Skipped]: {
+    backgroundColor: 'var(--muted)',
+    color: 'var(--muted-foreground)',
+  },
   [NodeStatus.PartialSuccess]: statusColorMapping[Status.PartialSuccess],
   [NodeStatus.Rejected]: statusColorMapping[Status.Rejected],
 };
diff --git a/ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsModal.tsx b/ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsModal.tsx
index 5fbb0ae4d..6bda25d6c 100644
--- a/ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsModal.tsx
+++ b/ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsModal.tsx
@@ -83,7 +83,11 @@ const DAGRunDetailsModal: React.FC<DAGRunDetailsModalProps> = ({
         },
       },
     },
-    { refreshInterval: 2000, keepPreviousData: true, isPaused: () => !canQuerySubDag }
+    {
+      refreshInterval: 2000,
+      keepPreviousData: true,
+      isPaused: () => !canQuerySubDag,
+    }
   );
 
   // Fetch regular DAG-run details (only when not querying sub-DAG)
@@ -100,11 +104,17 @@ const DAGRunDetailsModal: React.FC<DAGRunDetailsModalProps> = ({
         },
       },
     },
-    { refreshInterval: 2000, keepPreviousData: true, isPaused: () => canQuerySubDag }
+    {
+      refreshInterval: 2000,
+      keepPreviousData: true,
+      isPaused: () => canQuerySubDag,
+    }
   );
 
   // Use the appropriate query based on whether this is a sub-DAG-run
-  const { data, isLoading, isValidating, mutate } = canQuerySubDag ? subDAGQuery : dagRunQuery;
+  const { data, isLoading, isValidating, mutate } = canQuerySubDag
+    ? subDAGQuery
+    : dagRunQuery;
 
   // Update previous data ref when we get new data
   React.useEffect(() => {
@@ -118,15 +128,23 @@ const DAGRunDetailsModal: React.FC<DAGRunDetailsModalProps> = ({
   }, [data, name, dagRunId]);
 
   // Use current data or fall back to previous data to prevent flickering
-  const displayData = data?.dagRunDetails || previousDataRef.current?.dagRunDetails;
-  const displayName = data?.dagRunDetails ? name : (previousDataRef.current?.name || name);
-  const displayDagRunId = data?.dagRunDetails ? dagRunId : (previousDataRef.current?.dagRunId || dagRunId);
+  const displayData =
+    data?.dagRunDetails || previousDataRef.current?.dagRunDetails;
+  const displayName = data?.dagRunDetails
+    ? name
+    : previousDataRef.current?.name || name;
+  const displayDagRunId = data?.dagRunDetails
+    ? dagRunId
+    : previousDataRef.current?.dagRunId || dagRunId;
 
   // Show loading indicator only on very first load (no previous data at all)
   const isInitialLoading = isLoading && !displayData;
   // Show subtle loading indicator when switching between items
-  const isTransitioning = isValidating && previousDataRef.current &&
-    (previousDataRef.current.dagRunId !== dagRunId || previousDataRef.current.name !== name);
+  const isTransitioning =
+    isValidating &&
+    previousDataRef.current &&
+    (previousDataRef.current.dagRunId !== dagRunId ||
+      previousDataRef.current.name !== name);
 
   const refreshFn = React.useCallback(() => {
     setTimeout(() => mutate(), 500);
@@ -177,14 +195,11 @@ const DAGRunDetailsModal: React.FC<DAGRunDetailsModalProps> = ({
   return (
     <>
       {/* Backdrop */}
-      <div
-        className="fixed inset-0 h-screen w-screen z-40"
-        onClick={onClose}
-      />
+      <div className="fixed inset-0 h-screen w-screen z-40" onClick={onClose} />
 
       {/* Side Modal */}
       <div
-        className={`fixed top-0 bottom-0 right-0 md:w-3/4 w-full h-screen bg-background border-l border-border z-50 overflow-y-auto transition-all duration-150 ease-out ${
+        className={`fixed top-0 bottom-0 right-0 md:w-3/4 w-full h-screen bg-background border-l border-indigo-500/30 z-50 overflow-y-auto transition-all duration-150 ease-out ${
           isVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
         }`}
       >
diff --git a/ui/src/features/dags/components/common/LinkTab.tsx b/ui/src/features/dags/components/common/LinkTab.tsx
index 24d35d706..5f254838d 100644
--- a/ui/src/features/dags/components/common/LinkTab.tsx
+++ b/ui/src/features/dags/components/common/LinkTab.tsx
@@ -29,6 +29,7 @@ const LinkTab: React.FC<LinkTabProps> = ({
   >
     <Tab
       isActive={isActive}
+      asChild
       className={cn(
         'flex items-center gap-2 text-sm font-medium cursor-pointer',
         className
diff --git a/ui/src/features/dags/components/common/LiveSwitch.tsx b/ui/src/features/dags/components/common/LiveSwitch.tsx
index d6acdadab..86656fa6d 100644
--- a/ui/src/features/dags/components/common/LiveSwitch.tsx
+++ b/ui/src/features/dags/components/common/LiveSwitch.tsx
@@ -5,11 +5,12 @@
  */
 import { useErrorModal } from '@/components/ui/error-modal';
 import { Switch } from '@/components/ui/switch';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import ConfirmModal from '@/ui/ConfirmModal';
 import { useCallback, useContext, useState } from 'react';
 import { components } from '../../../../api/v2/schema';
 import { useConfig } from '../../../../contexts/ConfigContext';
 import { useClient } from '../../../../hooks/api';
-import { AppBarContext } from '@/contexts/AppBarContext';
 
 /**
  * Props for the LiveSwitch component
@@ -33,6 +34,8 @@ function LiveSwitch({ dag, refresh, 'aria-label': ariaLabel }: Props) {
   const config = useConfig();
   const { showError } = useErrorModal();
   const [checked, setChecked] = useState(!dag.suspended);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [pendingState, setPendingState] = useState<boolean | null>(null);
   const appBarContext = useContext(AppBarContext);
   const remoteNode = appBarContext.selectedRemoteNode || 'local';
 
@@ -65,23 +68,48 @@ function LiveSwitch({ dag, refresh, 'aria-label': ariaLabel }: Props) {
     [client, dag.fileName, refresh, remoteNode, showError]
   );
 
-  const handleCheckedChange = useCallback(
-    (newCheckedState: boolean) => {
-      setChecked(newCheckedState);
-      onSubmit(!newCheckedState);
-    },
-    [onSubmit]
-  );
+  const handleCheckedChange = useCallback((newCheckedState: boolean) => {
+    setPendingState(newCheckedState);
+    setShowConfirm(true);
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    if (pendingState !== null) {
+      setChecked(pendingState);
+      onSubmit(!pendingState);
+    }
+    setShowConfirm(false);
+    setPendingState(null);
+  }, [pendingState, onSubmit]);
+
+  const handleCancel = useCallback(() => {
+    setShowConfirm(false);
+    setPendingState(null);
+  }, []);
 
   return (
-    <Switch
-      checked={checked}
-      onCheckedChange={
-        config.permissions.runDags ? handleCheckedChange : undefined
-      }
-      disabled={!config.permissions.runDags}
-      aria-label={ariaLabel}
-    />
+    <>
+      <Switch
+        checked={checked}
+        onCheckedChange={
+          config.permissions.runDags ? handleCheckedChange : undefined
+        }
+        disabled={!config.permissions.runDags}
+        aria-label={ariaLabel}
+      />
+      <ConfirmModal
+        title={pendingState ? 'Enable Schedule' : 'Disable Schedule'}
+        buttonText={pendingState ? 'Enable' : 'Disable'}
+        visible={showConfirm}
+        dismissModal={handleCancel}
+        onSubmit={handleConfirm}
+      >
+        <p>
+          Are you sure you want to {pendingState ? 'enable' : 'disable'} the
+          schedule for &quot;{dag.fileName}&quot;?
+        </p>
+      </ConfirmModal>
+    </>
   );
 }
 
diff --git a/ui/src/features/dags/components/common/ModalLinkTab.tsx b/ui/src/features/dags/components/common/ModalLinkTab.tsx
index 11fef4b63..8a6a53a27 100644
--- a/ui/src/features/dags/components/common/ModalLinkTab.tsx
+++ b/ui/src/features/dags/components/common/ModalLinkTab.tsx
@@ -30,6 +30,7 @@ const ModalLinkTab: React.FC<ModalLinkTabProps> = ({
   >
     <Tab
       isActive={isActive}
+      asChild
       className={cn(
         'flex items-center gap-2 text-sm font-medium cursor-pointer',
         className
diff --git a/ui/src/features/dags/components/dag-details/WebhookTab.tsx b/ui/src/features/dags/components/dag-details/WebhookTab.tsx
index cbec7dca0..172d5da23 100644
--- a/ui/src/features/dags/components/dag-details/WebhookTab.tsx
+++ b/ui/src/features/dags/components/dag-details/WebhookTab.tsx
@@ -16,7 +16,7 @@ import {
   Webhook,
   WebhookOff,
 } from 'lucide-react';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { components } from '../../../../api/v2/schema';
 import { Button } from '../../../../components/ui/button';
 import {
@@ -27,11 +27,11 @@ import {
   CardTitle,
 } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
-import { useConfig } from '../../../../contexts/ConfigContext';
-import { TOKEN_KEY } from '../../../../contexts/AuthContext';
 import { AppBarContext } from '../../../../contexts/AppBarContext';
-import ConfirmModal from '../../../../ui/ConfirmModal';
+import { TOKEN_KEY } from '../../../../contexts/AuthContext';
+import { useConfig } from '../../../../contexts/ConfigContext';
 import dayjs from '../../../../lib/dayjs';
+import ConfirmModal from '../../../../ui/ConfirmModal';
 
 type WebhookDetails = components['schemas']['WebhookDetails'];
 
@@ -70,6 +70,10 @@ function WebhookTab({ fileName }: WebhookTabProps) {
   const [isActioning, setIsActioning] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showToggleConfirm, setShowToggleConfirm] = useState(false);
+  const [pendingToggleState, setPendingToggleState] = useState<boolean | null>(
+    null
+  );
 
   // Copy states
   const [copiedUrl, setCopiedUrl] = useState(false);
@@ -78,9 +82,10 @@ function WebhookTab({ fileName }: WebhookTabProps) {
 
   // Construct webhook URL (include remoteNode if not local)
   const remoteNode = appBarContext.selectedRemoteNode;
-  const webhookUrl = remoteNode && remoteNode !== 'local'
-    ? `${window.location.origin}/api/v2/webhooks/${encodeURIComponent(fileName)}?remoteNode=${encodeURIComponent(remoteNode)}`
-    : `${window.location.origin}/api/v2/webhooks/${encodeURIComponent(fileName)}`;
+  const webhookUrl =
+    remoteNode && remoteNode !== 'local'
+      ? `${window.location.origin}/api/v2/webhooks/${encodeURIComponent(fileName)}?remoteNode=${encodeURIComponent(remoteNode)}`
+      : `${window.location.origin}/api/v2/webhooks/${encodeURIComponent(fileName)}`;
 
   // API helpers
   const getAuthHeaders = useCallback(() => {
@@ -222,8 +227,14 @@ function WebhookTab({ fileName }: WebhookTabProps) {
     }
   };
 
-  // Toggle enabled
-  const handleToggle = async (enabled: boolean) => {
+  // Toggle enabled - show confirmation first
+  const handleToggleClick = (enabled: boolean) => {
+    setPendingToggleState(enabled);
+    setShowToggleConfirm(true);
+  };
+
+  const handleToggleConfirm = async () => {
+    if (pendingToggleState === null) return;
     try {
       setError(null);
       const remoteNode = getRemoteNodeParam();
@@ -232,7 +243,7 @@ function WebhookTab({ fileName }: WebhookTabProps) {
         {
           method: 'POST',
           headers: getAuthHeaders(),
-          body: JSON.stringify({ enabled }),
+          body: JSON.stringify({ enabled: pendingToggleState }),
         }
       );
 
@@ -245,9 +256,17 @@ function WebhookTab({ fileName }: WebhookTabProps) {
       setWebhook(data);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to toggle webhook');
+    } finally {
+      setShowToggleConfirm(false);
+      setPendingToggleState(null);
     }
   };
 
+  const handleToggleCancel = () => {
+    setShowToggleConfirm(false);
+    setPendingToggleState(null);
+  };
+
   // Copy handler
   const handleCopy = async (text: string, setCopied: (v: boolean) => void) => {
     try {
@@ -396,7 +415,7 @@ function WebhookTab({ fileName }: WebhookTabProps) {
               </span>
               <Switch
                 checked={webhook.enabled}
-                onCheckedChange={handleToggle}
+                onCheckedChange={handleToggleClick}
               />
             </div>
           </div>
@@ -431,8 +450,7 @@ function WebhookTab({ fileName }: WebhookTabProps) {
           {/* Metadata */}
           <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
             <div>
-              Created:{' '}
-              {dayjs(webhook.createdAt).format('MMM D, YYYY HH:mm')}
+              Created: {dayjs(webhook.createdAt).format('MMM D, YYYY HH:mm')}
             </div>
             {webhook.lastUsedAt && (
               <div>
@@ -521,6 +539,20 @@ function WebhookTab({ fileName }: WebhookTabProps) {
           this webhook token will immediately lose access.
         </p>
       </ConfirmModal>
+
+      {/* Toggle Confirmation Modal */}
+      <ConfirmModal
+        title={pendingToggleState ? 'Enable Webhook' : 'Disable Webhook'}
+        buttonText={pendingToggleState ? 'Enable' : 'Disable'}
+        visible={showToggleConfirm}
+        dismissModal={handleToggleCancel}
+        onSubmit={handleToggleConfirm}
+      >
+        <p>
+          Are you sure you want to {pendingToggleState ? 'enable' : 'disable'}{' '}
+          this webhook?
+        </p>
+      </ConfirmModal>
     </div>
   );
 }
diff --git a/ui/src/features/dags/components/dag-list/DAGTable.tsx b/ui/src/features/dags/components/dag-list/DAGTable.tsx
index 7e931abe1..d14136924 100644
--- a/ui/src/features/dags/components/dag-list/DAGTable.tsx
+++ b/ui/src/features/dags/components/dag-list/DAGTable.tsx
@@ -21,12 +21,17 @@ import {
   Filter,
   Search,
 } from 'lucide-react';
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
-import type { Config } from '../../../../contexts/ConfigContext';
-
-declare const getConfig: () => Config;
 import { components, Status } from '../../../../api/v2/schema';
+import type { Config } from '../../../../contexts/ConfigContext';
 import dayjs from '../../../../lib/dayjs';
 import StatusChip from '../../../../ui/StatusChip';
 import Ticker from '../../../../ui/Ticker';
@@ -35,6 +40,8 @@ import { CreateDAGModal, DAGPagination } from '../common';
 import DAGActions from '../common/DAGActions';
 import LiveSwitch from '../common/LiveSwitch';
 
+declare const getConfig: () => Config;
+
 // Helper to format milliseconds into d/h/m/s
 function formatMs(ms: number): string {
   const seconds = Math.floor(ms / 1000);
@@ -52,6 +59,7 @@ function formatMs(ms: number): string {
 }
 
 // Import shadcn/ui components
+import { PanelWidthContext } from '../../../../components/SplitLayout';
 import { Badge } from '../../../../components/ui/badge';
 import { Button } from '../../../../components/ui/button';
 import { Input } from '../../../../components/ui/input';
@@ -75,7 +83,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '../../../../components/ui/tooltip';
-import { PanelWidthContext } from '../../../../components/SplitLayout';
 import { AppBarContext } from '../../../../contexts/AppBarContext';
 import { useQuery } from '../../../../hooks/api';
 
@@ -93,7 +100,14 @@ interface DAGCardProps {
   className?: string;
 }
 
-function DAGCard({ dag, isSelected, onSelect, onTagClick, refreshFn, className = '' }: DAGCardProps) {
+function DAGCard({
+  dag,
+  isSelected,
+  onSelect,
+  onTagClick,
+  refreshFn,
+  className = '',
+}: DAGCardProps) {
   const fileName = dag.fileName;
   const title = dag.dag.name;
   const status = dag.latestDAGRun?.status;
@@ -113,7 +127,7 @@ function DAGCard({ dag, isSelected, onSelect, onTagClick, refreshFn, className =
 
   return (
     <div
-      className={`p-2.5 rounded-md border cursor-pointer overflow-hidden bg-card border-border hover:bg-muted/50 ${isSelected ? 'shadow-[inset_3px_0_0_0_rgba(0,0,0,0.2)]' : ''} ${status === Status.Running ? 'animate-running-row' : ''} ${className}`}
+      className={`card-obsidian p-2.5 cursor-pointer hover:bg-white/[0.05] transition-all duration-300 ${isSelected ? 'shadow-[inset_3px_0_0_0_var(--primary)] bg-white/[0.04]' : ''} ${status === Status.Running ? 'animate-running-row' : ''} ${className}`}
       onClick={handleCardClick}
     >
       {/* Header: Name + Status */}
@@ -397,7 +411,10 @@ const defaultColumns = [
       if (data.kind === ItemKind.Group) {
         // Group Row: Render group name directly with vertical centering
         return (
-          <div style={{ paddingLeft: `${row.depth * 1.5}rem` }} className="flex items-center min-h-[2.5rem]">
+          <div
+            style={{ paddingLeft: `${row.depth * 1.5}rem` }}
+            className="flex items-center min-h-[2.5rem]"
+          >
             <span className="font-normal text-muted-foreground">
               {getValue()}
             </span>
@@ -985,7 +1002,9 @@ function DAGTable({
     return hierarchicalData;
   }, [dags, clientSort, clientOrder]);
 
-  const tableInstanceRef = useRef<ReturnType<typeof useReactTable> | null>(null);
+  const tableInstanceRef = useRef<ReturnType<typeof useReactTable> | null>(
+    null
+  );
 
   useEffect(() => {
     if (!selectedDAG || !tableInstanceRef.current || !onSelectDAG) return;
@@ -1156,13 +1175,22 @@ function DAGTable({
       </div>
 
       {/* Desktop Table View - Hidden on mobile or when panel is narrow */}
-      <div className={`w-full overflow-hidden ${useCardView ? 'hidden' : 'hidden md:block'}`}>
+      <div
+        className={`w-full overflow-hidden ${useCardView ? 'hidden' : 'hidden md:block'}`}
+      >
         <Table
           className={`w-full text-xs ${isLoading ? 'opacity-70' : ''}`}
           style={{ tableLayout: 'fixed' }}
         >
-{/* Column widths: Expand 32px fixed, Name auto, Status 10%, LastRun 18%, Schedule 20%, Actions 10% */}
-          <colgroup><col style={{ width: '32px' }} /><col /><col style={{ width: '10%' }} /><col style={{ width: '18%' }} /><col style={{ width: '20%' }} /><col style={{ width: '10%' }} /></colgroup>
+          {/* Column widths: Expand 32px fixed, Name auto, Status 10%, LastRun 18%, Schedule 20%, Actions 10% */}
+          <colgroup>
+            <col style={{ width: '32px' }} />
+            <col />
+            <col style={{ width: '10%' }} />
+            <col style={{ width: '18%' }} />
+            <col style={{ width: '20%' }} />
+            <col style={{ width: '10%' }} />
+          </colgroup>
           <TableHeader>
             {instance.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -1218,8 +1246,11 @@ function DAGTable({
                     className={`text-[0.8125rem] ${
                       row.original?.kind === ItemKind.Group
                         ? 'bg-muted/50 font-semibold cursor-pointer hover:bg-muted/70'
-                        : isDAGRow && 'dag' in row.original && selectedDAG === (row.original as DAGRow).dag.fileName
-                          ? 'cursor-pointer hover:bg-muted/50 shadow-[inset_3px_0_0_0_rgba(0,0,0,0.2)]'
+                        : isDAGRow &&
+                            'dag' in row.original &&
+                            selectedDAG ===
+                              (row.original as DAGRow).dag.fileName
+                          ? 'cursor-pointer hover:bg-muted/50 shadow-[inset_3px_0_0_0_var(--primary)]'
                           : 'cursor-pointer hover:bg-muted/50'
                     } ${isDAGRow && 'dag' in row.original && (row.original as DAGRow).dag.latestDAGRun?.status === Status.Running ? 'animate-running-row' : ''}`}
                     onClick={(e) => {
diff --git a/ui/src/features/dags/components/visualization/Graph.tsx b/ui/src/features/dags/components/visualization/Graph.tsx
index 784be8e8d..2dbe83ffa 100644
--- a/ui/src/features/dags/components/visualization/Graph.tsx
+++ b/ui/src/features/dags/components/visualization/Graph.tsx
@@ -129,10 +129,10 @@ function Graph({
     height: isExpandedView ? '100%' : 'auto',
     borderRadius: '0.5em',
     background: isDarkMode
-      ? `linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
-         linear-gradient(180deg, rgba(255,255,255,0.08) 1px, transparent 1px)`
-      : `linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px),
-         linear-gradient(180deg, rgba(0,0,0,0.15) 1px, transparent 1px)`,
+      ? `linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
+         linear-gradient(180deg, rgba(255,255,255,0.05) 1px, transparent 1px)`
+      : `linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px),
+         linear-gradient(180deg, rgba(0,0,0,0.08) 1px, transparent 1px)`,
     backgroundSize: '20px 20px',
   };
 
@@ -248,15 +248,15 @@ function Graph({
 
     // Define node styles for different states
     // Use theme-appropriate colors for light/dark modes
-    const nodeFill = isDarkMode ? '#1e293b' : '#ffffff'; // slate-800 for dark, white for light
-    const nodeColor = isDarkMode ? '#f8fafc' : '#1e293b'; // slate-50 for dark, slate-800 for light
-    const strokeDefault = isDarkMode ? '#64748b' : '#94a3b8'; // slate-500/slate-400
+    const nodeFill = isDarkMode ? '#161a3d' : '#ffffff'; // --card for dark, white for light
+    const nodeColor = isDarkMode ? '#f1f5f9' : '#0f1129'; // --foreground for dark, --background for light
+    const strokeDefault = isDarkMode ? '#2d336d' : '#94a3b8';
 
     dat.push(
       `classDef none color:${nodeColor},fill:${nodeFill},stroke:${strokeDefault},stroke-width:2.5px`
     );
     dat.push(
-      `classDef running color:${nodeColor},fill:${nodeFill},stroke:#22c55e,stroke-width:2.5px`
+      `classDef running color:${nodeColor},fill:${nodeFill},stroke:#10b981,stroke-width:2.5px`
     );
     dat.push(
       `classDef error color:${nodeColor},fill:${nodeFill},stroke:#ef4444,stroke-width:2.5px`
@@ -265,10 +265,10 @@ function Graph({
       `classDef cancel color:${nodeColor},fill:${nodeFill},stroke:#ec4899,stroke-width:2.5px`
     );
     dat.push(
-      `classDef done color:${nodeColor},fill:${nodeFill},stroke:#22c55e,stroke-width:2.5px`
+      `classDef done color:${nodeColor},fill:${nodeFill},stroke:#10b981,stroke-width:2.5px`
     );
     dat.push(
-      `classDef skipped color:${nodeColor},fill:${nodeFill},stroke:#6b7280,stroke-width:2.5px`
+      `classDef skipped color:${nodeColor},fill:${nodeFill},stroke:#64748b,stroke-width:2.5px`
     );
     dat.push(
       `classDef partial color:${nodeColor},fill:${nodeFill},stroke:#f59e0b,stroke-width:2.5px`
@@ -277,7 +277,7 @@ function Graph({
       `classDef waiting color:${nodeColor},fill:${nodeFill},stroke:#f59e0b,stroke-width:2.5px`
     );
     dat.push(
-      `classDef rejected color:${nodeColor},fill:${nodeFill},stroke:#dc2626,stroke-width:2.5px`
+      `classDef rejected color:${nodeColor},fill:${nodeFill},stroke:#ef4444,stroke-width:2.5px`
     );
 
     // Add custom link styles
diff --git a/ui/src/features/dags/components/visualization/TimelineChart.tsx b/ui/src/features/dags/components/visualization/TimelineChart.tsx
index 76f1452eb..8824d1a61 100644
--- a/ui/src/features/dags/components/visualization/TimelineChart.tsx
+++ b/ui/src/features/dags/components/visualization/TimelineChart.tsx
@@ -15,7 +15,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import dayjs from '@/lib/dayjs';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { components, NodeStatus } from '../../../../api/v2/schema';
 
 /**
@@ -82,15 +82,30 @@ function calculateDuration(startMs: number, endMs: number): string {
  * Status colors matching the Graph component (sepia theme)
  */
 const statusColors: Record<NodeStatus, { bg: string; border: string }> = {
-  [NodeStatus.NotStarted]: { bg: '#c8bfb0', border: '#c8bfb0' },
-  [NodeStatus.Running]: { bg: '#7da87d', border: '#7da87d' },
-  [NodeStatus.Failed]: { bg: '#c4726a', border: '#c4726a' },
-  [NodeStatus.Aborted]: { bg: '#d4a574', border: '#d4a574' },
-  [NodeStatus.Success]: { bg: '#7da87d', border: '#7da87d' },
-  [NodeStatus.Skipped]: { bg: '#6b635a', border: '#6b635a' },
-  [NodeStatus.PartialSuccess]: { bg: '#c4956a', border: '#c4956a' },
-  [NodeStatus.Waiting]: { bg: '#f59e0b', border: '#f59e0b' },
-  [NodeStatus.Rejected]: { bg: '#dc2626', border: '#dc2626' },
+  [NodeStatus.NotStarted]: {
+    bg: 'var(--muted)',
+    border: 'var(--muted-foreground)',
+  },
+  [NodeStatus.Running]: { bg: 'var(--success)', border: 'var(--success)' },
+  [NodeStatus.Failed]: {
+    bg: 'var(--destructive)',
+    border: 'var(--destructive)',
+  },
+  [NodeStatus.Aborted]: { bg: 'var(--warning)', border: 'var(--warning)' },
+  [NodeStatus.Success]: { bg: 'var(--success)', border: 'var(--success)' },
+  [NodeStatus.Skipped]: {
+    bg: 'var(--muted)',
+    border: 'var(--muted-foreground)',
+  },
+  [NodeStatus.PartialSuccess]: {
+    bg: 'var(--warning)',
+    border: 'var(--warning)',
+  },
+  [NodeStatus.Waiting]: { bg: 'var(--warning)', border: 'var(--warning)' },
+  [NodeStatus.Rejected]: {
+    bg: 'var(--destructive)',
+    border: 'var(--destructive)',
+  },
 };
 
 /**
@@ -201,7 +216,10 @@ function TimelineChart({ status }: Props) {
           <div
             key={idx}
             className="absolute top-0 h-full flex items-center"
-            style={{ left: `${marker.position}%`, transform: 'translateX(-50%)' }}
+            style={{
+              left: `${marker.position}%`,
+              transform: 'translateX(-50%)',
+            }}
           >
             <span className="text-[10px] text-muted-foreground font-mono">
               {marker.label}
@@ -225,7 +243,8 @@ function TimelineChart({ status }: Props) {
 
         {/* Step rows */}
         {items.map((item, idx) => {
-          const leftPercent = ((item.startMs - timelineStart) / totalRange) * 100;
+          const leftPercent =
+            ((item.startMs - timelineStart) / totalRange) * 100;
           const widthPercent = ((item.endMs - item.startMs) / totalRange) * 100;
           const colors = getStatusColor(item.status);
           const isRunning = item.status === NodeStatus.Running;
@@ -267,13 +286,20 @@ function TimelineChart({ status }: Props) {
                       </div>
                     )}
                     <div className="text-xs">
-                      Status: <span className="font-medium">{getStatusLabel(item.status)}</span>
+                      Status:{' '}
+                      <span className="font-medium">
+                        {getStatusLabel(item.status)}
+                      </span>
                     </div>
                     <div className="text-xs">
-                      Duration: <span className="font-mono">{calculateDuration(item.startMs, item.endMs)}</span>
+                      Duration:{' '}
+                      <span className="font-mono">
+                        {calculateDuration(item.startMs, item.endMs)}
+                      </span>
                     </div>
                     <div className="text-xs text-muted-foreground">
-                      {dayjs(item.startMs).format('HH:mm:ss')} → {dayjs(item.endMs).format('HH:mm:ss')}
+                      {dayjs(item.startMs).format('HH:mm:ss')} →{' '}
+                      {dayjs(item.endMs).format('HH:mm:ss')}
                     </div>
                     {item.node.error && (
                       <div className="text-xs text-destructive">
diff --git a/ui/src/features/dashboard/components/DashboardTimechart.tsx b/ui/src/features/dashboard/components/DashboardTimechart.tsx
index ce4985188..970b26c71 100644
--- a/ui/src/features/dashboard/components/DashboardTimechart.tsx
+++ b/ui/src/features/dashboard/components/DashboardTimechart.tsx
@@ -635,7 +635,7 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
           border-width: 0 !important;
           cursor: pointer !important;
           transition: transform 0.1s ease, filter 0.1s ease !important;
-          box-shadow: 0 0 10px rgba(0,0,0,0.1);
+          box-shadow: 0 0 10px rgba(0,0,0,0.3);
         }
         .vis-item:hover {
           filter: brightness(1.2);
@@ -645,12 +645,12 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
         .vis-item.vis-selected {
           border-width: 1px !important;
           border-color: var(--primary) !important;
-          box-shadow: 0 0 15px rgba(var(--primary), 0.3);
+          box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
         }
         .vis-current-time {
           background-color: var(--primary) !important;
           width: 2px !important;
-          box-shadow: 0 0 10px rgba(var(--primary), 0.4);
+          box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
         }
         /* Scrollbar styling for timeline */
         .vis-timeline::-webkit-scrollbar {
diff --git a/ui/src/features/queues/components/QueueCard.tsx b/ui/src/features/queues/components/QueueCard.tsx
index 1b4a3f6e0..7d9f28e99 100644
--- a/ui/src/features/queues/components/QueueCard.tsx
+++ b/ui/src/features/queues/components/QueueCard.tsx
@@ -179,8 +179,9 @@ function QueueCard({
   return (
     <div
       className={cn(
-        'border rounded-lg bg-card transition-all duration-200',
-        isSelected && 'ring-1 ring-foreground/20'
+        'card-obsidian transition-all duration-300 hover:bg-white/[0.05] hover:border-white/10',
+        isSelected &&
+          'ring-1 ring-primary/40 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)]'
       )}
     >
       {/* Queue Header */}
@@ -251,7 +252,7 @@ function QueueCard({
           {/* Running DAGs */}
           {queue.running && queue.running.length > 0 && (
             <div>
-              <div className="px-3 py-2 bg-muted/20">
+              <div className="px-3 py-2 bg-muted/10">
                 <div className="flex items-center gap-2 mb-2">
                   <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                     Running ({queue.running.length})
@@ -313,7 +314,7 @@ function QueueCard({
                         <Trash2
                           className={cn(
                             'h-3 w-3',
-                            isClearing && 'animate-pulse'
+                            isClearing && 'animate-spin'
                           )}
                         />
                         <span className="ml-1 text-xs">Clear</span>
diff --git a/ui/src/features/queues/components/QueueList.tsx b/ui/src/features/queues/components/QueueList.tsx
index 0a1839118..f48ef6367 100644
--- a/ui/src/features/queues/components/QueueList.tsx
+++ b/ui/src/features/queues/components/QueueList.tsx
@@ -45,9 +45,11 @@ function QueueList({
   // Initialize selection when queues change
   React.useEffect(() => {
     if (queues.length > 0 && selectedIndex === -1) {
-      setSelectedIndex(0);
+      // Don't auto-select the first item by default to avoid weird border artifacts
+      // only select if there's actual interaction or specific need
+      // setSelectedIndex(0);
     } else if (selectedIndex >= queues.length) {
-      setSelectedIndex(queues.length - 1);
+      setSelectedIndex(queues.length > 0 ? queues.length - 1 : -1);
     }
   }, [queues, selectedIndex]);
 
diff --git a/ui/src/features/system-status/components/PathsCard.tsx b/ui/src/features/system-status/components/PathsCard.tsx
index a1b9fce7a..4a07e6b96 100644
--- a/ui/src/features/system-status/components/PathsCard.tsx
+++ b/ui/src/features/system-status/components/PathsCard.tsx
@@ -1,8 +1,8 @@
-import { FolderOpen, Copy, Check, X } from 'lucide-react';
+import { Check, Copy, FolderOpen, X } from 'lucide-react';
 import React from 'react';
-import { cn } from '../../../lib/utils';
-import { useConfig, type PathsConfig } from '../../../contexts/ConfigContext';
 import { Button } from '../../../components/ui/button';
+import { useConfig, type PathsConfig } from '../../../contexts/ConfigContext';
+import { cn } from '../../../lib/utils';
 
 interface PathItemProps {
   label: string;
@@ -50,7 +50,13 @@ function PathItem({ label, path }: PathItemProps) {
   );
 }
 
-function PathsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+function PathsDialog({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
   const config = useConfig();
   const paths: PathsConfig = config.paths;
 
@@ -75,8 +81,8 @@ function PathsDialog({ open, onClose }: { open: boolean; onClose: () => void })
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed inset-0 bg-black/50" onClick={onClose} />
-      <div className="relative bg-card border rounded-lg w-full max-w-lg mx-4">
-        <div className="flex items-center justify-between p-2 border-b">
+      <div className="relative bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 border border-indigo-500/30 rounded-xl w-full max-w-lg mx-4 shadow-2xl">
+        <div className="flex items-center justify-between p-3 border-b border-indigo-500/20">
           <div className="flex items-center gap-1.5">
             <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="text-xs font-medium">System Paths</span>
@@ -88,11 +94,15 @@ function PathsDialog({ open, onClose }: { open: boolean; onClose: () => void })
             <X className="h-3.5 w-3.5" />
           </button>
         </div>
-        <div className="p-2">
+        <div className="p-4">
           {paths ? (
             <div className="space-y-0">
               {pathItems.map((item) => (
-                <PathItem key={item.label} label={item.label} path={item.path} />
+                <PathItem
+                  key={item.label}
+                  label={item.label}
+                  path={item.path}
+                />
               ))}
             </div>
           ) : (
diff --git a/ui/src/layouts/Layout.tsx b/ui/src/layouts/Layout.tsx
index 3c120f5ae..f34123d57 100644
--- a/ui/src/layouts/Layout.tsx
+++ b/ui/src/layouts/Layout.tsx
@@ -129,7 +129,7 @@ function Content({ navbarColor, children }: LayoutProps) {
       </aside>
 
       {/* Main Content Area */}
-      <div className="flex flex-col flex-1 h-full overflow-hidden relative bg-background/50">
+      <div className="flex flex-col flex-1 h-full overflow-hidden relative bg-background">
         {/* Mobile Header Bar */}
         <header
           className={cn(
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index f25d78ab8..04db8e375 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -62,14 +62,14 @@ function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
           'flex items-center rounded-lg transition-all duration-200 ease-in-out px-2 group relative',
           isOpen ? 'h-9 w-full gap-3' : 'h-10 w-10 justify-center',
           isActive
-            ? 'text-foreground bg-primary/10 shadow-[inset_0_0_0_1px_rgba(99,102,241,0.2)]'
+            ? 'text-foreground bg-primary/10 shadow-[0_0_15px_rgba(var(--primary-rgb),0.15),inset_0_0_0_1px_rgba(var(--primary-rgb),0.3)]'
             : 'text-sidebar-foreground hover:text-foreground hover:bg-white/5'
         )}
         aria-current={isActive ? 'page' : undefined}
         title={isOpen ? '' : text}
       >
         {isActive && (
-          <div className="absolute left-0 w-1 h-4 bg-primary rounded-r-full shadow-[0_0_8px_rgba(99,102,241,0.6)]" />
+          <div className="absolute left-0 w-1 h-4 bg-primary rounded-r-full shadow-[0_0_8px_var(--primary)]" />
         )}
         <div
           className={cn(
@@ -119,7 +119,7 @@ export const mainListItems = React.forwardRef<
         {isOpen ? (
           <>
             <div className="flex-1 flex items-center gap-2 truncate">
-              <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.4)]">
+              <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
                 <span className="text-white font-bold text-sm">D</span>
               </div>
               <span className="font-bold tracking-tight text-lg text-foreground select-none truncate">
@@ -140,7 +140,7 @@ export const mainListItems = React.forwardRef<
             className="mx-auto w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 transition-all text-foreground glow-sm active:scale-95"
             aria-label="Expand sidebar"
           >
-            <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.4)]">
+            <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
               <span className="text-white font-bold text-sm">D</span>
             </div>
           </button>
diff --git a/ui/src/pages/api-keys/index.tsx b/ui/src/pages/api-keys/index.tsx
index 554d5d2b9..dd12091f3 100644
--- a/ui/src/pages/api-keys/index.tsx
+++ b/ui/src/pages/api-keys/index.tsx
@@ -1,9 +1,11 @@
-import { useState, useEffect, useCallback, useContext } from 'react';
-import { useConfig } from '@/contexts/ConfigContext';
-import { useIsAdmin, TOKEN_KEY } from '@/contexts/AuthContext';
-import { AppBarContext } from '@/contexts/AppBarContext';
 import { components } from '@/api/v2/schema';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import {
   Table,
   TableBody,
@@ -12,16 +14,14 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { KeyRound, MoreHorizontal, Pencil, Trash2, Plus } from 'lucide-react';
-import { APIKeyFormModal } from './APIKeyFormModal';
-import ConfirmModal from '@/ui/ConfirmModal';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import { TOKEN_KEY, useIsAdmin } from '@/contexts/AuthContext';
+import { useConfig } from '@/contexts/ConfigContext';
 import dayjs from '@/lib/dayjs';
+import ConfirmModal from '@/ui/ConfirmModal';
+import { KeyRound, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { APIKeyFormModal } from './APIKeyFormModal';
 
 type APIKey = components['schemas']['APIKey'];
 
@@ -47,11 +47,14 @@ export default function APIKeysPage() {
     try {
       const token = localStorage.getItem(TOKEN_KEY);
       const remoteNode = appBarContext.selectedRemoteNode || 'local';
-      const response = await fetch(`${config.apiURL}/api-keys?remoteNode=${remoteNode}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const response = await fetch(
+        `${config.apiURL}/api-keys?remoteNode=${remoteNode}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
 
       if (!response.ok) {
         throw new Error('Failed to fetch API keys');
@@ -76,12 +79,15 @@ export default function APIKeysPage() {
     try {
       const token = localStorage.getItem(TOKEN_KEY);
       const remoteNode = appBarContext.selectedRemoteNode || 'local';
-      const response = await fetch(`${config.apiURL}/api-keys/${deletingKey.id}?remoteNode=${remoteNode}`, {
-        method: 'DELETE',
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const response = await fetch(
+        `${config.apiURL}/api-keys/${deletingKey.id}?remoteNode=${remoteNode}`,
+        {
+          method: 'DELETE',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({}));
@@ -99,7 +105,9 @@ export default function APIKeysPage() {
   if (!isAdmin) {
     return (
       <div className="flex items-center justify-center h-64">
-        <p className="text-muted-foreground">You do not have permission to access this page.</p>
+        <p className="text-muted-foreground">
+          You do not have permission to access this page.
+        </p>
       </div>
     );
   }
@@ -113,7 +121,11 @@ export default function APIKeysPage() {
             Manage API keys for programmatic access
           </p>
         </div>
-        <Button onClick={() => setShowCreateModal(true)} size="sm" className="h-8">
+        <Button
+          onClick={() => setShowCreateModal(true)}
+          size="sm"
+          className="h-8"
+        >
           <Plus className="h-4 w-4 mr-1.5" />
           Create API Key
         </Button>
@@ -125,7 +137,7 @@ export default function APIKeysPage() {
         </div>
       )}
 
-      <div className="border rounded-lg">
+      <div className="card-obsidian">
         <Table>
           <TableHeader>
             <TableRow>
@@ -140,13 +152,19 @@ export default function APIKeysPage() {
           <TableBody>
             {isLoading ? (
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={6}
+                  className="text-center text-muted-foreground py-8"
+                >
                   Loading API keys...
                 </TableCell>
               </TableRow>
             ) : apiKeys.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={6}
+                  className="text-center text-muted-foreground py-8"
+                >
                   No API keys found. Create one to get started.
                 </TableCell>
               </TableRow>
@@ -243,8 +261,8 @@ export default function APIKeysPage() {
         onSubmit={handleDeleteKey}
       >
         <p>
-          Are you sure you want to revoke the API key &quot;{deletingKey?.name}&quot;?
-          Any applications using this key will immediately lose access.
+          Are you sure you want to revoke the API key &quot;{deletingKey?.name}
+          &quot;? Any applications using this key will immediately lose access.
         </p>
       </ConfirmModal>
     </div>
diff --git a/ui/src/pages/audit-logs/index.tsx b/ui/src/pages/audit-logs/index.tsx
index 3569a932e..f62a6f98f 100644
--- a/ui/src/pages/audit-logs/index.tsx
+++ b/ui/src/pages/audit-logs/index.tsx
@@ -1,12 +1,14 @@
-import { useState, useEffect, useCallback, useContext, useRef } from 'react';
-import { useConfig } from '@/contexts/ConfigContext';
-import { useIsAdmin, TOKEN_KEY } from '@/contexts/AuthContext';
-import { AppBarContext } from '@/contexts/AppBarContext';
 import { components } from '@/api/v2/schema';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { DateRangePicker } from '@/components/ui/date-range-picker';
-import { ToggleButton, ToggleGroup } from '@/components/ui/toggle-group';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import {
   Table,
   TableBody,
@@ -15,15 +17,13 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { ScrollText, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
+import { ToggleButton, ToggleGroup } from '@/components/ui/toggle-group';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import { TOKEN_KEY, useIsAdmin } from '@/contexts/AuthContext';
+import { useConfig } from '@/contexts/ConfigContext';
 import dayjs from '@/lib/dayjs';
+import { ChevronLeft, ChevronRight, RefreshCw, ScrollText } from 'lucide-react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 type AuditEntry = components['schemas']['AuditEntry'];
 
@@ -52,10 +52,16 @@ export default function AuditLogsPage() {
   const [offset, setOffset] = useState(0);
 
   // Date filter states
-  const [dateRangeMode, setDateRangeMode] = useState<'preset' | 'specific' | 'custom'>('preset');
+  const [dateRangeMode, setDateRangeMode] = useState<
+    'preset' | 'specific' | 'custom'
+  >('preset');
   const [datePreset, setDatePreset] = useState('last7days');
-  const [specificPeriod, setSpecificPeriod] = useState<'date' | 'month' | 'year'>('date');
-  const [specificValue, setSpecificValue] = useState(dayjs().format('YYYY-MM-DD'));
+  const [specificPeriod, setSpecificPeriod] = useState<
+    'date' | 'month' | 'year'
+  >('date');
+  const [specificValue, setSpecificValue] = useState(
+    dayjs().format('YYYY-MM-DD')
+  );
   const [fromDate, setFromDate] = useState<string | undefined>();
   const [toDate, setToDate] = useState<string | undefined>();
 
@@ -73,76 +79,104 @@ export default function AuditLogsPage() {
   const prevApiEndTimeRef = useRef(apiEndTime);
 
   // Helper functions for date calculations
-  const getPresetDates = useCallback((preset: string): { from: string; to?: string } => {
-    const now = dayjs();
-    const startOfDay = config.tzOffsetInSec !== undefined
-      ? now.utcOffset(config.tzOffsetInSec / 60).startOf('day')
-      : now.startOf('day');
-
-    switch (preset) {
-      case 'today':
-        return { from: startOfDay.format('YYYY-MM-DDTHH:mm:ss') };
-      case 'yesterday':
-        return {
-          from: startOfDay.subtract(1, 'day').format('YYYY-MM-DDTHH:mm:ss'),
-          to: startOfDay.format('YYYY-MM-DDTHH:mm:ss'),
-        };
-      case 'last7days':
-        return { from: startOfDay.subtract(7, 'day').format('YYYY-MM-DDTHH:mm:ss') };
-      case 'last30days':
-        return { from: startOfDay.subtract(30, 'day').format('YYYY-MM-DDTHH:mm:ss') };
-      case 'thisWeek':
-        return { from: startOfDay.startOf('week').format('YYYY-MM-DDTHH:mm:ss') };
-      case 'thisMonth':
-        return { from: startOfDay.startOf('month').format('YYYY-MM-DDTHH:mm:ss') };
-      default:
-        return { from: startOfDay.subtract(7, 'day').format('YYYY-MM-DDTHH:mm:ss') };
-    }
-  }, [config.tzOffsetInSec]);
-
-  const getSpecificPeriodDates = useCallback((
-    period: 'date' | 'month' | 'year',
-    value: string
-  ): { from: string; to?: string } => {
-    const parsedDate = dayjs(value);
-    if (!parsedDate.isValid()) {
-      const fallback = config.tzOffsetInSec !== undefined
-        ? dayjs().utcOffset(config.tzOffsetInSec / 60)
-        : dayjs();
-      return { from: fallback.startOf('day').format('YYYY-MM-DDTHH:mm:ss') };
-    }
+  const getPresetDates = useCallback(
+    (preset: string): { from: string; to?: string } => {
+      const now = dayjs();
+      const startOfDay =
+        config.tzOffsetInSec !== undefined
+          ? now.utcOffset(config.tzOffsetInSec / 60).startOf('day')
+          : now.startOf('day');
+
+      switch (preset) {
+        case 'today':
+          return { from: startOfDay.format('YYYY-MM-DDTHH:mm:ss') };
+        case 'yesterday':
+          return {
+            from: startOfDay.subtract(1, 'day').format('YYYY-MM-DDTHH:mm:ss'),
+            to: startOfDay.format('YYYY-MM-DDTHH:mm:ss'),
+          };
+        case 'last7days':
+          return {
+            from: startOfDay.subtract(7, 'day').format('YYYY-MM-DDTHH:mm:ss'),
+          };
+        case 'last30days':
+          return {
+            from: startOfDay.subtract(30, 'day').format('YYYY-MM-DDTHH:mm:ss'),
+          };
+        case 'thisWeek':
+          return {
+            from: startOfDay.startOf('week').format('YYYY-MM-DDTHH:mm:ss'),
+          };
+        case 'thisMonth':
+          return {
+            from: startOfDay.startOf('month').format('YYYY-MM-DDTHH:mm:ss'),
+          };
+        default:
+          return {
+            from: startOfDay.subtract(7, 'day').format('YYYY-MM-DDTHH:mm:ss'),
+          };
+      }
+    },
+    [config.tzOffsetInSec]
+  );
 
-    // Apply config timezone offset before calculating day/month/year boundaries.
-    // This follows the same pattern as Dashboard (ui/src/pages/index.tsx).
-    const date = config.tzOffsetInSec !== undefined
-      ? parsedDate.utcOffset(config.tzOffsetInSec / 60)
-      : parsedDate;
+  const getSpecificPeriodDates = useCallback(
+    (
+      period: 'date' | 'month' | 'year',
+      value: string
+    ): { from: string; to?: string } => {
+      const parsedDate = dayjs(value);
+      if (!parsedDate.isValid()) {
+        const fallback =
+          config.tzOffsetInSec !== undefined
+            ? dayjs().utcOffset(config.tzOffsetInSec / 60)
+            : dayjs();
+        return { from: fallback.startOf('day').format('YYYY-MM-DDTHH:mm:ss') };
+      }
 
-    // dayjs uses 'day' instead of 'date' for startOf/endOf
-    const unit = period === 'date' ? 'day' : period;
-    return {
-      from: date.startOf(unit).format('YYYY-MM-DDTHH:mm:ss'),
-      to: date.endOf(unit).format('YYYY-MM-DDTHH:mm:ss'),
-    };
-  }, [config.tzOffsetInSec]);
+      // Apply config timezone offset before calculating day/month/year boundaries.
+      // This follows the same pattern as Dashboard (ui/src/pages/index.tsx).
+      const date =
+        config.tzOffsetInSec !== undefined
+          ? parsedDate.utcOffset(config.tzOffsetInSec / 60)
+          : parsedDate;
+
+      // dayjs uses 'day' instead of 'date' for startOf/endOf
+      const unit = period === 'date' ? 'day' : period;
+      return {
+        from: date.startOf(unit).format('YYYY-MM-DDTHH:mm:ss'),
+        to: date.endOf(unit).format('YYYY-MM-DDTHH:mm:ss'),
+      };
+    },
+    [config.tzOffsetInSec]
+  );
 
   // Convert datetime to ISO 8601 for API calls
-  const formatDateForApi = useCallback((dateString: string | undefined): string | undefined => {
-    if (!dateString) return undefined;
-    // Add seconds if missing
-    const dateWithSeconds = dateString.split(':').length < 3 ? `${dateString}:00` : dateString;
-    // Apply timezone offset and convert to ISO string
-    if (config.tzOffsetInSec !== undefined) {
-      return dayjs(dateWithSeconds).utcOffset(config.tzOffsetInSec / 60, true).toISOString();
-    }
-    return dayjs(dateWithSeconds).toISOString();
-  }, [config.tzOffsetInSec]);
+  const formatDateForApi = useCallback(
+    (dateString: string | undefined): string | undefined => {
+      if (!dateString) return undefined;
+      // Add seconds if missing
+      const dateWithSeconds =
+        dateString.split(':').length < 3 ? `${dateString}:00` : dateString;
+      // Apply timezone offset and convert to ISO string
+      if (config.tzOffsetInSec !== undefined) {
+        return dayjs(dateWithSeconds)
+          .utcOffset(config.tzOffsetInSec / 60, true)
+          .toISOString();
+      }
+      return dayjs(dateWithSeconds).toISOString();
+    },
+    [config.tzOffsetInSec]
+  );
 
   const getInputTypeForPeriod = (period: 'date' | 'month' | 'year'): string => {
     switch (period) {
-      case 'date': return 'date';
-      case 'month': return 'month';
-      case 'year': return 'number';
+      case 'date':
+        return 'date';
+      case 'month':
+        return 'month';
+      case 'year':
+        return 'number';
     }
   };
 
@@ -173,60 +207,69 @@ export default function AuditLogsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const fetchAuditLogs = useCallback(async (resetOffset = false) => {
-    // Reset offset if filters changed
-    let effectiveOffset = offset;
-    const filtersChanged = prevCategoryRef.current !== category ||
-      prevRemoteNodeRef.current !== remoteNode ||
-      prevApiStartTimeRef.current !== apiStartTime ||
-      prevApiEndTimeRef.current !== apiEndTime;
-
-    if (resetOffset || filtersChanged) {
-      effectiveOffset = 0;
-      if (filtersChanged) {
-        setOffset(0);
-        prevCategoryRef.current = category;
-        prevRemoteNodeRef.current = remoteNode;
-        prevApiStartTimeRef.current = apiStartTime;
-        prevApiEndTimeRef.current = apiEndTime;
+  const fetchAuditLogs = useCallback(
+    async (resetOffset = false) => {
+      // Reset offset if filters changed
+      let effectiveOffset = offset;
+      const filtersChanged =
+        prevCategoryRef.current !== category ||
+        prevRemoteNodeRef.current !== remoteNode ||
+        prevApiStartTimeRef.current !== apiStartTime ||
+        prevApiEndTimeRef.current !== apiEndTime;
+
+      if (resetOffset || filtersChanged) {
+        effectiveOffset = 0;
+        if (filtersChanged) {
+          setOffset(0);
+          prevCategoryRef.current = category;
+          prevRemoteNodeRef.current = remoteNode;
+          prevApiStartTimeRef.current = apiStartTime;
+          prevApiEndTimeRef.current = apiEndTime;
+        }
       }
-    }
 
-    try {
-      setIsLoading(true);
-      const token = localStorage.getItem(TOKEN_KEY);
-
-      const params = new URLSearchParams();
-      params.set('remoteNode', remoteNode);
-      if (category && category !== 'all') params.set('category', category);
-      params.set('limit', String(PAGE_SIZE));
-      params.set('offset', String(effectiveOffset));
-      if (apiStartTime) params.set('startTime', apiStartTime);
-      if (apiEndTime) params.set('endTime', apiEndTime);
-
-      const response = await fetch(`${config.apiURL}/audit?${params.toString()}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        if (response.status === 403) {
-          throw new Error('You do not have permission to view audit logs');
+      try {
+        setIsLoading(true);
+        const token = localStorage.getItem(TOKEN_KEY);
+
+        const params = new URLSearchParams();
+        params.set('remoteNode', remoteNode);
+        if (category && category !== 'all') params.set('category', category);
+        params.set('limit', String(PAGE_SIZE));
+        params.set('offset', String(effectiveOffset));
+        if (apiStartTime) params.set('startTime', apiStartTime);
+        if (apiEndTime) params.set('endTime', apiEndTime);
+
+        const response = await fetch(
+          `${config.apiURL}/audit?${params.toString()}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+
+        if (!response.ok) {
+          if (response.status === 403) {
+            throw new Error('You do not have permission to view audit logs');
+          }
+          throw new Error('Failed to fetch audit logs');
         }
-        throw new Error('Failed to fetch audit logs');
-      }
 
-      const data = await response.json();
-      setEntries(data.entries || []);
-      setTotal(data.total || 0);
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load audit logs');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [config.apiURL, category, offset, remoteNode, apiStartTime, apiEndTime]);
+        const data = await response.json();
+        setEntries(data.entries || []);
+        setTotal(data.total || 0);
+        setError(null);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : 'Failed to load audit logs'
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [config.apiURL, category, offset, remoteNode, apiStartTime, apiEndTime]
+  );
 
   useEffect(() => {
     if (apiStartTime !== undefined) {
@@ -253,7 +296,10 @@ export default function AuditLogsPage() {
     setApiEndTime(formatDateForApi(dates.to));
   };
 
-  const handleSpecificPeriodChange = (value: string, period?: 'date' | 'month' | 'year') => {
+  const handleSpecificPeriodChange = (
+    value: string,
+    period?: 'date' | 'month' | 'year'
+  ) => {
     setSpecificValue(value);
     const periodToUse = period || specificPeriod;
     const dates = getSpecificPeriodDates(periodToUse, value);
@@ -263,7 +309,9 @@ export default function AuditLogsPage() {
     setApiEndTime(formatDateForApi(dates.to));
   };
 
-  const handleDateRangeModeChange = (newMode: 'preset' | 'specific' | 'custom') => {
+  const handleDateRangeModeChange = (
+    newMode: 'preset' | 'specific' | 'custom'
+  ) => {
     setDateRangeMode(newMode);
 
     if (newMode === 'preset') {
@@ -292,12 +340,16 @@ export default function AuditLogsPage() {
   if (!isAdmin) {
     return (
       <div className="flex items-center justify-center h-64">
-        <p className="text-muted-foreground">You do not have permission to access this page.</p>
+        <p className="text-muted-foreground">
+          You do not have permission to access this page.
+        </p>
       </div>
     );
   }
 
-  const parseDetails = (details: string | undefined): Record<string, unknown> => {
+  const parseDetails = (
+    details: string | undefined
+  ): Record<string, unknown> => {
     if (!details) return {};
     try {
       return JSON.parse(details);
@@ -341,7 +393,12 @@ export default function AuditLogsPage() {
               ))}
             </SelectContent>
           </Select>
-          <Button onClick={() => fetchAuditLogs()} size="sm" variant="outline" className="h-8">
+          <Button
+            onClick={() => fetchAuditLogs()}
+            size="sm"
+            variant="outline"
+            className="h-8"
+          >
             <RefreshCw className="h-4 w-4" />
           </Button>
         </div>
@@ -404,11 +461,17 @@ export default function AuditLogsPage() {
                 const parsedDate = dayjs(specificValue);
 
                 if (newPeriod === 'date') {
-                  newValue = parsedDate.isValid() ? parsedDate.format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD');
+                  newValue = parsedDate.isValid()
+                    ? parsedDate.format('YYYY-MM-DD')
+                    : dayjs().format('YYYY-MM-DD');
                 } else if (newPeriod === 'month') {
-                  newValue = parsedDate.isValid() ? parsedDate.format('YYYY-MM') : dayjs().format('YYYY-MM');
+                  newValue = parsedDate.isValid()
+                    ? parsedDate.format('YYYY-MM')
+                    : dayjs().format('YYYY-MM');
                 } else {
-                  newValue = parsedDate.isValid() ? parsedDate.format('YYYY') : dayjs().format('YYYY');
+                  newValue = parsedDate.isValid()
+                    ? parsedDate.format('YYYY')
+                    : dayjs().format('YYYY');
                 }
 
                 setSpecificValue(newValue);
@@ -459,7 +522,7 @@ export default function AuditLogsPage() {
         </div>
       )}
 
-      <div className="border rounded-lg">
+      <div className="card-obsidian">
         <Table>
           <TableHeader>
             <TableRow>
@@ -474,13 +537,19 @@ export default function AuditLogsPage() {
           <TableBody>
             {isLoading ? (
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={6}
+                  className="text-center text-muted-foreground py-8"
+                >
                   Loading audit logs...
                 </TableCell>
               </TableRow>
             ) : entries.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={6}
+                  className="text-center text-muted-foreground py-8"
+                >
                   <ScrollText className="h-8 w-8 mx-auto mb-2 opacity-50" />
                   No audit log entries found
                 </TableCell>
@@ -490,7 +559,9 @@ export default function AuditLogsPage() {
                 <TableRow key={entry.id}>
                   <TableCell className="text-sm text-muted-foreground whitespace-nowrap">
                     {config.tzOffsetInSec !== undefined
-                      ? dayjs(entry.timestamp).utcOffset(config.tzOffsetInSec / 60).format('MMM D, YYYY HH:mm:ss')
+                      ? dayjs(entry.timestamp)
+                          .utcOffset(config.tzOffsetInSec / 60)
+                          .format('MMM D, YYYY HH:mm:ss')
                       : dayjs(entry.timestamp).format('MMM D, YYYY HH:mm:ss')}
                   </TableCell>
                   <TableCell>
@@ -499,14 +570,13 @@ export default function AuditLogsPage() {
                     </span>
                   </TableCell>
                   <TableCell>
-                    <span className="text-xs font-mono">
-                      {entry.action}
-                    </span>
-                  </TableCell>
-                  <TableCell className="text-sm">
-                    {entry.username}
+                    <span className="text-xs font-mono">{entry.action}</span>
                   </TableCell>
-                  <TableCell className="text-sm text-muted-foreground max-w-[300px] truncate" title={entry.details}>
+                  <TableCell className="text-sm">{entry.username}</TableCell>
+                  <TableCell
+                    className="text-sm text-muted-foreground max-w-[300px] truncate"
+                    title={entry.details}
+                  >
                     {formatDetails(entry)}
                   </TableCell>
                   <TableCell className="text-sm text-muted-foreground font-mono">
@@ -523,7 +593,8 @@ export default function AuditLogsPage() {
       {total > PAGE_SIZE && (
         <div className="flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            Showing {offset + 1} - {Math.min(offset + PAGE_SIZE, total)} of {total} entries
+            Showing {offset + 1} - {Math.min(offset + PAGE_SIZE, total)} of{' '}
+            {total} entries
           </p>
           <div className="flex items-center gap-2">
             <Button
diff --git a/ui/src/pages/system-status/index.tsx b/ui/src/pages/system-status/index.tsx
index 51c1fad5b..473bad81e 100644
--- a/ui/src/pages/system-status/index.tsx
+++ b/ui/src/pages/system-status/index.tsx
@@ -203,10 +203,7 @@ function SystemStatus() {
 
       {/* Workers Status */}
       <h2 className="text-xl font-semibold mt-8 mb-4">Workers</h2>
-      <div
-        className="rounded-xl border border-border bg-surface overflow-hidden"
-        style={{ minHeight: '200px' }}
-      >
+      <div className="card-obsidian" style={{ minHeight: '200px' }}>
         <WorkersSummary
           workers={workersData?.workers || []}
           isLoading={!workersData && !workersError}
diff --git a/ui/src/pages/terminal/index.tsx b/ui/src/pages/terminal/index.tsx
index 90ec02b83..de7d4bac0 100644
--- a/ui/src/pages/terminal/index.tsx
+++ b/ui/src/pages/terminal/index.tsx
@@ -98,11 +98,11 @@ export default function TerminalPage() {
       fontSize: 14,
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
       theme: {
-        background: theme === 'dark' ? '#020617' : '#ffffff',
-        foreground: theme === 'dark' ? '#d4d4d4' : '#020617',
-        cursor: theme === 'dark' ? '#d4d4d4' : '#020617',
-        cursorAccent: theme === 'dark' ? '#020617' : '#ffffff',
-        selectionBackground: theme === 'dark' ? '#264f78' : '#add6ff',
+        background: theme === 'dark' ? '#0f1129' : '#ffffff',
+        foreground: theme === 'dark' ? '#f1f5f9' : '#020617',
+        cursor: theme === 'dark' ? '#f1f5f9' : '#020617',
+        cursorAccent: theme === 'dark' ? '#0f1129' : '#ffffff',
+        selectionBackground: theme === 'dark' ? '#1c224d' : '#add6ff',
       },
       allowProposedApi: true,
     });
diff --git a/ui/src/pages/users/index.tsx b/ui/src/pages/users/index.tsx
index a8e4502ab..62d305c5c 100644
--- a/ui/src/pages/users/index.tsx
+++ b/ui/src/pages/users/index.tsx
@@ -1,9 +1,11 @@
-import { useState, useEffect, useCallback, useContext } from 'react';
-import { useConfig } from '@/contexts/ConfigContext';
-import { useAuth, useIsAdmin, TOKEN_KEY } from '@/contexts/AuthContext';
-import { AppBarContext } from '@/contexts/AppBarContext';
 import { components } from '@/api/v2/schema';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import {
   Table,
   TableBody,
@@ -12,17 +14,23 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import { TOKEN_KEY, useAuth, useIsAdmin } from '@/contexts/AuthContext';
+import { useConfig } from '@/contexts/ConfigContext';
+import dayjs from '@/lib/dayjs';
+import ConfirmModal from '@/ui/ConfirmModal';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { UserPlus, MoreHorizontal, Pencil, Trash2, Key, Ban, UserCheck } from 'lucide-react';
-import { UserFormModal } from './UserFormModal';
+  Ban,
+  Key,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  UserCheck,
+  UserPlus,
+} from 'lucide-react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { ResetPasswordModal } from './ResetPasswordModal';
-import ConfirmModal from '@/ui/ConfirmModal';
-import dayjs from '@/lib/dayjs';
+import { UserFormModal } from './UserFormModal';
 
 type User = components['schemas']['User'];
 
@@ -56,12 +64,17 @@ export default function UsersPage() {
   const fetchUsers = useCallback(async () => {
     try {
       const token = localStorage.getItem(TOKEN_KEY);
-      const remoteNode = encodeURIComponent(appBarContext.selectedRemoteNode || 'local');
-      const response = await fetch(`${config.apiURL}/users?remoteNode=${remoteNode}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const remoteNode = encodeURIComponent(
+        appBarContext.selectedRemoteNode || 'local'
+      );
+      const response = await fetch(
+        `${config.apiURL}/users?remoteNode=${remoteNode}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
 
       if (!response.ok) {
         throw new Error('Failed to fetch users');
@@ -85,13 +98,18 @@ export default function UsersPage() {
 
     try {
       const token = localStorage.getItem(TOKEN_KEY);
-      const remoteNode = encodeURIComponent(appBarContext.selectedRemoteNode || 'local');
-      const response = await fetch(`${config.apiURL}/users/${deletingUser.id}?remoteNode=${remoteNode}`, {
-        method: 'DELETE',
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const remoteNode = encodeURIComponent(
+        appBarContext.selectedRemoteNode || 'local'
+      );
+      const response = await fetch(
+        `${config.apiURL}/users/${deletingUser.id}?remoteNode=${remoteNode}`,
+        {
+          method: 'DELETE',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({}));
@@ -109,15 +127,20 @@ export default function UsersPage() {
   const handleToggleDisabled = async (user: User) => {
     try {
       const token = localStorage.getItem(TOKEN_KEY);
-      const remoteNode = encodeURIComponent(appBarContext.selectedRemoteNode || 'local');
-      const response = await fetch(`${config.apiURL}/users/${user.id}?remoteNode=${remoteNode}`, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ isDisabled: !user.isDisabled }),
-      });
+      const remoteNode = encodeURIComponent(
+        appBarContext.selectedRemoteNode || 'local'
+      );
+      const response = await fetch(
+        `${config.apiURL}/users/${user.id}?remoteNode=${remoteNode}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ isDisabled: !user.isDisabled }),
+        }
+      );
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({}));
@@ -140,7 +163,11 @@ export default function UsersPage() {
             Manage user accounts and their roles
           </p>
         </div>
-        <Button onClick={() => setShowCreateModal(true)} size="sm" className="h-8">
+        <Button
+          onClick={() => setShowCreateModal(true)}
+          size="sm"
+          className="h-8"
+        >
           <UserPlus className="h-4 w-4 mr-1.5" />
           Add User
         </Button>
@@ -152,7 +179,7 @@ export default function UsersPage() {
         </div>
       )}
 
-      <div className="border rounded-lg">
+      <div className="card-obsidian">
         <Table>
           <TableHeader>
             <TableRow>
@@ -168,24 +195,35 @@ export default function UsersPage() {
           <TableBody>
             {isLoading ? (
               <TableRow>
-                <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={7}
+                  className="text-center text-muted-foreground py-8"
+                >
                   Loading users...
                 </TableCell>
               </TableRow>
             ) : users.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                <TableCell
+                  colSpan={7}
+                  className="text-center text-muted-foreground py-8"
+                >
                   No users found
                 </TableCell>
               </TableRow>
             ) : (
               users.map((user) => (
-                <TableRow key={user.id} className={user.isDisabled ? 'opacity-60' : ''}>
+                <TableRow
+                  key={user.id}
+                  className={user.isDisabled ? 'opacity-60' : ''}
+                >
                   <TableCell className="font-medium">
                     <div className="flex items-center gap-2">
                       {user.username}
                       {user.id === currentUser?.id && (
-                        <span className="text-xs text-muted-foreground">(you)</span>
+                        <span className="text-xs text-muted-foreground">
+                          (you)
+                        </span>
                       )}
                     </div>
                   </TableCell>
@@ -199,7 +237,9 @@ export default function UsersPage() {
                   </TableCell>
                   <TableCell className="text-sm">
                     {user.isDisabled ? (
-                      <span className="text-red-600 dark:text-red-400">Disabled</span>
+                      <span className="text-red-600 dark:text-red-400">
+                        Disabled
+                      </span>
                     ) : (
                       <span className="text-muted-foreground">Active</span>
                     )}
@@ -223,13 +263,17 @@ export default function UsersPage() {
                           Edit
                         </DropdownMenuItem>
                         {isAdmin && (
-                          <DropdownMenuItem onClick={() => setResetPasswordUser(user)}>
+                          <DropdownMenuItem
+                            onClick={() => setResetPasswordUser(user)}
+                          >
                             <Key className="h-4 w-4 mr-2" />
                             Reset Password
                           </DropdownMenuItem>
                         )}
                         {isAdmin && user.id !== currentUser?.id && (
-                          <DropdownMenuItem onClick={() => handleToggleDisabled(user)}>
+                          <DropdownMenuItem
+                            onClick={() => handleToggleDisabled(user)}
+                          >
                             {user.isDisabled ? (
                               <>
                                 <UserCheck className="h-4 w-4 mr-2" />
@@ -297,8 +341,11 @@ export default function UsersPage() {
         dismissModal={() => setDeletingUser(null)}
         onSubmit={handleDeleteUser}
       >
-        <p>Are you sure you want to delete user &quot;{deletingUser?.username}&quot;? This action cannot be undone.</p>
+        <p>
+          Are you sure you want to delete user &quot;{deletingUser?.username}
+          &quot;? This action cannot be undone.
+        </p>
       </ConfirmModal>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/src/pages/webhooks/index.tsx b/ui/src/pages/webhooks/index.tsx
index adb4be829..3d6a489d3 100644
--- a/ui/src/pages/webhooks/index.tsx
+++ b/ui/src/pages/webhooks/index.tsx
@@ -1,18 +1,12 @@
-import { useState, useEffect, useCallback, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useConfig } from '@/contexts/ConfigContext';
-import { useIsAdmin, TOKEN_KEY } from '@/contexts/AuthContext';
-import { AppBarContext } from '@/contexts/AppBarContext';
 import { components } from '@/api/v2/schema';
 import { Button } from '@/components/ui/button';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,25 +14,31 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
 import {
-  Webhook,
-  MoreHorizontal,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { AppBarContext } from '@/contexts/AppBarContext';
+import { TOKEN_KEY, useIsAdmin } from '@/contexts/AuthContext';
+import { useConfig } from '@/contexts/ConfigContext';
+import dayjs from '@/lib/dayjs';
+import ConfirmModal from '@/ui/ConfirmModal';
+import {
+  Check,
+  Copy,
   ExternalLink,
+  MoreHorizontal,
   RefreshCw,
   Trash2,
-  Copy,
-  Check,
+  Webhook,
 } from 'lucide-react';
-import ConfirmModal from '@/ui/ConfirmModal';
-import dayjs from '@/lib/dayjs';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 type WebhookDetails = components['schemas']['WebhookDetails'];
 
@@ -52,8 +52,15 @@ export default function WebhooksPage() {
   const [error, setError] = useState<string | null>(null);
 
   // Modal states
-  const [deletingWebhook, setDeletingWebhook] = useState<WebhookDetails | null>(null);
-  const [regeneratingWebhook, setRegeneratingWebhook] = useState<WebhookDetails | null>(null);
+  const [deletingWebhook, setDeletingWebhook] = useState<WebhookDetails | null>(
+    null
+  );
+  const [regeneratingWebhook, setRegeneratingWebhook] =
+    useState<WebhookDetails | null>(null);
+  const [togglingWebhook, setTogglingWebhook] = useState<{
+    webhook: WebhookDetails;
+    enabled: boolean;
+  } | null>(null);
   const [newToken, setNewToken] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -99,16 +106,21 @@ export default function WebhooksPage() {
     fetchWebhooks();
   }, [fetchWebhooks]);
 
-  const handleToggle = async (webhook: WebhookDetails, enabled: boolean) => {
+  const handleToggleClick = (webhook: WebhookDetails, enabled: boolean) => {
+    setTogglingWebhook({ webhook, enabled });
+  };
+
+  const handleToggleConfirm = async () => {
+    if (!togglingWebhook) return;
     try {
       setError(null);
       const remoteNode = getRemoteNodeParam();
       const response = await fetch(
-        `${config.apiURL}/dags/${encodeURIComponent(webhook.dagName)}/webhook/toggle?remoteNode=${remoteNode}`,
+        `${config.apiURL}/dags/${encodeURIComponent(togglingWebhook.webhook.dagName)}/webhook/toggle?remoteNode=${remoteNode}`,
         {
           method: 'POST',
           headers: getAuthHeaders(),
-          body: JSON.stringify({ enabled }),
+          body: JSON.stringify({ enabled: togglingWebhook.enabled }),
         }
       );
 
@@ -120,6 +132,8 @@ export default function WebhooksPage() {
       fetchWebhooks();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to toggle webhook');
+    } finally {
+      setTogglingWebhook(null);
     }
   };
 
@@ -146,7 +160,9 @@ export default function WebhooksPage() {
       setNewToken(data.token);
       fetchWebhooks();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to regenerate token');
+      setError(
+        err instanceof Error ? err.message : 'Failed to regenerate token'
+      );
       setRegeneratingWebhook(null);
     }
   };
@@ -225,7 +241,7 @@ export default function WebhooksPage() {
         </div>
       )}
 
-      <div className="border rounded-lg">
+      <div className="card-obsidian">
         <Table>
           <TableHeader>
             <TableRow>
@@ -278,7 +294,7 @@ export default function WebhooksPage() {
                       <Switch
                         checked={webhook.enabled}
                         onCheckedChange={(checked) =>
-                          handleToggle(webhook, checked)
+                          handleToggleClick(webhook, checked)
                         }
                       />
                       <span className="text-xs text-muted-foreground">
@@ -394,6 +410,21 @@ export default function WebhooksPage() {
           will immediately lose access.
         </p>
       </ConfirmModal>
+
+      {/* Toggle Confirmation */}
+      <ConfirmModal
+        title={togglingWebhook?.enabled ? 'Enable Webhook' : 'Disable Webhook'}
+        buttonText={togglingWebhook?.enabled ? 'Enable' : 'Disable'}
+        visible={!!togglingWebhook}
+        dismissModal={() => setTogglingWebhook(null)}
+        onSubmit={handleToggleConfirm}
+      >
+        <p>
+          Are you sure you want to{' '}
+          {togglingWebhook?.enabled ? 'enable' : 'disable'} the webhook for
+          &quot;{togglingWebhook?.webhook.dagName}&quot;?
+        </p>
+      </ConfirmModal>
     </div>
   );
 }
diff --git a/ui/src/pages/workers/index.tsx b/ui/src/pages/workers/index.tsx
index c145ab01c..e7c63d62a 100644
--- a/ui/src/pages/workers/index.tsx
+++ b/ui/src/pages/workers/index.tsx
@@ -1,18 +1,18 @@
+import { Activity, Cpu, Search, Server } from 'lucide-react';
 import React from 'react';
-import { Server, Activity, Cpu, Search } from 'lucide-react';
+import type { components } from '../../api/v2/schema';
 import { Input } from '../../components/ui/input';
 import { RefreshButton } from '../../components/ui/refresh-button';
 import { AppBarContext } from '../../contexts/AppBarContext';
-import { useQuery } from '../../hooks/api';
-import type { components } from '../../api/v2/schema';
+import { DAGRunDetailsModal } from '../../features/dag-runs/components/dag-run-details';
 import WorkerList from '../../features/workers/components/WorkerList';
 import WorkerMetrics from '../../features/workers/components/WorkerMetrics';
-import { DAGRunDetailsModal } from '../../features/dag-runs/components/dag-run-details';
+import { useQuery } from '../../hooks/api';
 
 function Workers() {
   const appBarContext = React.useContext(AppBarContext);
   const [searchText, setSearchText] = React.useState('');
-  
+
   // State for DAG run modal
   const [modalDAGRun, setModalDAGRun] = React.useState<{
     name: string;
@@ -46,19 +46,19 @@ function Workers() {
   // Filter workers based on search text
   const filteredWorkers = React.useMemo(() => {
     if (!data?.workers || !searchText) return data?.workers || [];
-    
+
     const search = searchText.toLowerCase();
     return data.workers.filter((worker) => {
       // Search by ID
       if (worker.id.toLowerCase().includes(search)) return true;
-      
+
       // Search by labels
       if (worker.labels) {
         return Object.entries(worker.labels).some(([key, value]) =>
           `${key}=${value}`.toLowerCase().includes(search)
         );
       }
-      
+
       return false;
     });
   }, [data?.workers, searchText]);
@@ -67,11 +67,21 @@ function Workers() {
   const metrics = React.useMemo(() => {
     const workers = data?.workers || [];
     const totalWorkers = workers.length;
-    const totalPollers = workers.reduce((sum, w) => sum + (w.totalPollers || 0), 0);
-    const busyPollers = workers.reduce((sum, w) => sum + (w.busyPollers || 0), 0);
-    const totalTasks = workers.reduce((sum, w) => sum + (w.runningTasks?.length || 0), 0);
-    const utilization = totalPollers > 0 ? Math.round((busyPollers / totalPollers) * 100) : 0;
-    
+    const totalPollers = workers.reduce(
+      (sum, w) => sum + (w.totalPollers || 0),
+      0
+    );
+    const busyPollers = workers.reduce(
+      (sum, w) => sum + (w.busyPollers || 0),
+      0
+    );
+    const totalTasks = workers.reduce(
+      (sum, w) => sum + (w.runningTasks?.length || 0),
+      0
+    );
+    const utilization =
+      totalPollers > 0 ? Math.round((busyPollers / totalPollers) * 100) : 0;
+
     // Count healthy workers (heartbeat within last 10 seconds)
     const healthyWorkers = workers.filter((worker) => {
       if (!worker.lastHeartbeatAt) return false;
@@ -91,28 +101,35 @@ function Workers() {
   }, [data?.workers]);
 
   // Handle task click
-  const handleTaskClick = React.useCallback((task: components['schemas']['RunningTask']) => {
-    // For nested tasks, we need to set up the URL params for sub DAG view
-    if (task.parentDagRunName && task.parentDagRunId) {
-      const searchParams = new URLSearchParams();
-      searchParams.set('subDAGRunId', task.dagRunId);
-      searchParams.set('dagRunId', task.parentDagRunId);
-      searchParams.set('dagRunName', task.parentDagRunName);
-      window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
-      
-      // Open modal with parent DAG info
-      setModalDAGRun({
-        name: task.parentDagRunName,
-        dagRunId: task.parentDagRunId,
-      });
-    } else {
-      // For root tasks, open directly
-      setModalDAGRun({
-        name: task.dagName,
-        dagRunId: task.dagRunId,
-      });
-    }
-  }, []);
+  const handleTaskClick = React.useCallback(
+    (task: components['schemas']['RunningTask']) => {
+      // For nested tasks, we need to set up the URL params for sub DAG view
+      if (task.parentDagRunName && task.parentDagRunId) {
+        const searchParams = new URLSearchParams();
+        searchParams.set('subDAGRunId', task.dagRunId);
+        searchParams.set('dagRunId', task.parentDagRunId);
+        searchParams.set('dagRunName', task.parentDagRunName);
+        window.history.pushState(
+          {},
+          '',
+          `${window.location.pathname}?${searchParams.toString()}`
+        );
+
+        // Open modal with parent DAG info
+        setModalDAGRun({
+          name: task.parentDagRunName,
+          dagRunId: task.parentDagRunId,
+        });
+      } else {
+        // For root tasks, open directly
+        setModalDAGRun({
+          name: task.dagName,
+          dagRunId: task.dagRunId,
+        });
+      }
+    },
+    []
+  );
 
   if (error) {
     const errorData = error as components['schemas']['Error'];
@@ -124,7 +141,9 @@ function Workers() {
             {errorData?.message || 'Failed to load workers'}
           </p>
           {data?.errors?.map((err, idx) => (
-            <p key={idx} className="text-xs text-error">{err}</p>
+            <p key={idx} className="text-xs text-error">
+              {err}
+            </p>
           ))}
         </div>
       </div>
@@ -134,7 +153,7 @@ function Workers() {
   return (
     <div className="flex flex-col gap-3 w-full h-full overflow-hidden">
       {/* Header with search and refresh */}
-      <div className="border rounded bg-card flex-shrink-0">
+      <div className="card-obsidian flex-shrink-0">
         <div className="flex items-center justify-between p-3">
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2">
@@ -160,7 +179,7 @@ function Workers() {
       <WorkerMetrics metrics={metrics} isLoading={isLoading} />
 
       {/* Worker List */}
-      <div className="border rounded bg-card flex-1 flex flex-col min-h-0">
+      <div className="card-obsidian flex-1 flex flex-col min-h-0">
         <div className="p-3 border-b flex-shrink-0">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
@@ -189,15 +208,15 @@ function Workers() {
           </div>
         </div>
         <div className="flex-1 min-h-0 overflow-auto">
-          <WorkerList 
-            workers={filteredWorkers} 
+          <WorkerList
+            workers={filteredWorkers}
             isLoading={isLoading && !data}
             errors={data?.errors}
             onTaskClick={handleTaskClick}
           />
         </div>
       </div>
-      
+
       {/* DAG Run Details Modal */}
       {modalDAGRun && (
         <DAGRunDetailsModal
@@ -215,4 +234,4 @@ function Workers() {
   );
 }
 
-export default Workers;
\ No newline at end of file
+export default Workers;
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index 67d7d7f2e..b737c082f 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -30,6 +30,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-surface: var(--surface);
 
   /* Sidebar */
   --color-sidebar: var(--sidebar);
@@ -80,6 +81,7 @@
     --success: #10b981;
     --warning: #f59e0b;
     --info: #0ea5e9;
+    --surface: #ffffff;
 
     --sidebar: #f8fafc;
     --sidebar-foreground: #475569;
@@ -103,48 +105,50 @@
   }
 
   .dark {
-    --background: #020617;
-    --foreground: #f8fafc;
-    --card: #0b0f1a;
-    --card-foreground: #f8fafc;
-    --popover: #0f172a;
-    --popover-foreground: #f8fafc;
-    --primary: #818cf8;
+    --background: #0a0c1f; /* Base Obsidian */
+    --foreground: #f1f5f9;
+    --card: rgba(255, 255, 255, 0.03); /* Transparent Cards for depth */
+    --card-foreground: #f1f5f9;
+    --popover: #111432;
+    --popover-foreground: #f1f5f9;
+    --primary: #6366f1;
     --primary-foreground: #ffffff;
-    --secondary: #1e293b;
-    --secondary-foreground: #f8fafc;
-    --muted: #0f172a;
+    --secondary: rgba(255, 255, 255, 0.05);
+    --secondary-foreground: #f1f5f9;
+    --muted: rgba(255, 255, 255, 0.02);
     --muted-foreground: #94a3b8;
-    --accent: #1e293b;
-    --accent-foreground: #f8fafc;
+    --accent: rgba(255, 255, 255, 0.05);
+    --accent-foreground: #f1f5f9;
     --destructive: #ef4444;
     --destructive-foreground: #ffffff;
-    --border: rgba(255, 255, 255, 0.08);
-    --input: rgba(255, 255, 255, 0.08);
+    --border: rgba(255, 255, 255, 0.06);
+    --input: rgba(255, 255, 255, 0.06);
     --ring: #6366f1;
     --success: #10b981;
     --warning: #f59e0b;
     --info: #0ea5e9;
+    --surface: #111432;
 
-    --sidebar: #020617;
+    --sidebar: #0a0c1f; /* Unified with background */
     --sidebar-foreground: #94a3b8;
-    --sidebar-border: rgba(255, 255, 255, 0.08);
+    --sidebar-border: rgba(255, 255, 255, 0.04);
 
     /* Button Tokens mapping - Obsidian Dark */
-    --btn-primary-top: #818cf8;
-    --btn-primary-bottom: #6366f1;
-    --btn-primary-border: #4f46e5;
+    --btn-primary-top: #6366f1;
+    --btn-primary-bottom: #4f46e5;
+    --btn-primary-border: #4338ca;
 
-    --btn-secondary-top: #1e293b;
-    --btn-secondary-bottom: #0f172a;
+    --btn-secondary-top: #1c224d;
+    --btn-secondary-bottom: #161a3d;
     --btn-secondary-border: rgba(255, 255, 255, 0.1);
-    --btn-secondary-platform: #020617;
+    --btn-secondary-platform: #0a0c1f;
 
     /* RGB fallbacks */
-    --bg: 2 6 23;
-    --text: 248 250 252;
-    --sidebar-bg: 2 6 23;
+    --bg: 10 12 31;
+    --text: 241 245 249;
+    --sidebar-bg: 10 12 31;
     --sidebar-text: 148 163 184;
+    --primary-rgb: 99 102 241;
   }
 
   * {
@@ -152,11 +156,23 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--background);
+    color: var(--foreground);
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     letter-spacing: -0.011em;
   }
+
+  .dark body {
+    background: radial-gradient(
+      circle at 60% 0%,
+      rgba(99, 102, 241, 0.08) 0%,
+      #0a0c1f 50%,
+      #0a0c1f 100%
+    );
+    background-color: #0a0c1f;
+    background-attachment: fixed;
+  }
 }
 
 /* Base Button Redesign - Clean, sharp, consistent */
@@ -269,3 +285,51 @@
 .status-running {
   @apply bg-primary/10 text-primary border border-primary/20 animate-pulse;
 }
+
+/* Obsidian Card Utility - Unified containers */
+.card-obsidian {
+  @apply bg-card border border-border rounded-xl overflow-hidden;
+  box-shadow: none;
+}
+/* Light mode hover */
+.card-obsidian:hover {
+  @apply bg-secondary/50;
+  border-color: var(--border);
+}
+/* Dark mode specific styling */
+.dark .card-obsidian {
+  @apply border-white/5;
+}
+.dark .card-obsidian:hover {
+  @apply bg-white/[0.04] border-white/10;
+}
+/* Remove Radix Table internal borders within card-obsidian */
+.card-obsidian .rt-TableCell,
+.card-obsidian .rt-TableColumnHeaderCell,
+.card-obsidian .rt-TableRowHeaderCell {
+  box-shadow: none !important;
+  border-bottom: none !important;
+}
+.card-obsidian .rt-TableRow {
+  box-shadow: none !important;
+}
+.card-obsidian .rt-TableHeader {
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
+}
+.card-obsidian tr:last-child td {
+  border-bottom: none;
+}
+
+/* Dropdown & Popover Backgrounds */
+[data-radix-popper-content-wrapper] [role='menu'],
+[data-radix-popper-content-wrapper] [role='listbox'],
+[data-radix-popper-content-wrapper] [data-slot='select-content'] {
+  background-color: var(--popover) !important;
+}
+
+.dark [data-radix-popper-content-wrapper] [role='menu'],
+.dark [data-radix-popper-content-wrapper] [role='listbox'],
+.dark [data-radix-popper-content-wrapper] [data-slot='select-content'] {
+  background: linear-gradient(to bottom, #161b3d, #111432) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}

From a4394c4850bd9aec69ff48cad7b543e3145f027d Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sat, 17 Jan 2026 22:32:17 +0900
Subject: [PATCH 03/19] fix

---
 ui/src/components/ui/dialog.tsx               |   4 +-
 .../dag-details/NodeStatusTableRow.tsx        |  20 ++--
 .../dags/components/visualization/Graph.tsx   |   6 +-
 .../system-status/components/PathsCard.tsx    | 100 +++++++-----------
 ui/src/ui/Mermaid.tsx                         |  41 ++++++-
 5 files changed, 94 insertions(+), 77 deletions(-)

diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
index bbb074791..33996abf7 100644
--- a/ui/src/components/ui/dialog.tsx
+++ b/ui/src/components/ui/dialog.tsx
@@ -54,8 +54,8 @@ const DialogContent = React.forwardRef<
       >
         {children}
         {!hideCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-            <X className="h-4 w-4" />
+          <DialogPrimitive.Close className="absolute right-3 top-3 p-1.5 rounded-md opacity-70 ring-offset-background transition-opacity hover:opacity-100 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <X className="h-6 w-6" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
diff --git a/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx b/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
index aedd9c44a..80d55bd9b 100644
--- a/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
+++ b/ui/src/features/dags/components/dag-details/NodeStatusTableRow.tsx
@@ -179,23 +179,21 @@ function InlineLogViewer({
   const lineCount = data?.lineCount || 0;
 
   return (
-    <div className="bg-muted rounded overflow-hidden border border-border">
+    <div className="bg-slate-800 rounded overflow-hidden border border-slate-700">
       {isLoading && !data ? (
-        <div className="text-muted-foreground text-xs py-4 px-3">
-          Loading logs...
-        </div>
+        <div className="text-slate-400 text-xs py-4 px-3">Loading logs...</div>
       ) : lines.length === 0 ? (
-        <div className="text-muted-foreground text-xs py-4 px-3">
+        <div className="text-slate-400 text-xs py-4 px-3">
           &lt;No log output&gt;
         </div>
       ) : (
         <div className="overflow-x-auto max-h-[400px] overflow-y-auto">
-          <pre className="font-mono text-[11px] text-foreground p-2">
+          <pre className="font-mono text-[11px] text-slate-100 p-2">
             {lines.map((line, index) => {
               const lineNumber = totalLines - lineCount + index + 1;
               return (
                 <div key={index} className="flex px-1 py-0.5">
-                  <span className="text-muted-foreground/50 mr-3 select-none w-12 text-right flex-shrink-0">
+                  <span className="text-slate-500 mr-3 select-none w-12 text-right flex-shrink-0">
                     {lineNumber}
                   </span>
                   <span className="whitespace-pre-wrap break-all flex-grow">
@@ -981,8 +979,8 @@ function NodeStatusTableRow({
                         className={cn(
                           'px-3 py-1 text-xs font-medium transition-colors rounded',
                           activeLogTab === 'stdout'
-                            ? 'bg-foreground/80 text-white'
-                            : 'bg-accent text-foreground/90 hover:bg-accent'
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-muted text-foreground hover:bg-muted/80'
                         )}
                       >
                         out
@@ -995,8 +993,8 @@ function NodeStatusTableRow({
                         className={cn(
                           'px-3 py-1 text-xs font-medium transition-colors rounded',
                           activeLogTab === 'stderr'
-                            ? 'bg-foreground/80 text-white'
-                            : 'bg-accent text-foreground/90 hover:bg-accent'
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-muted text-foreground hover:bg-muted/80'
                         )}
                       >
                         err
diff --git a/ui/src/features/dags/components/visualization/Graph.tsx b/ui/src/features/dags/components/visualization/Graph.tsx
index 2dbe83ffa..1d4db494b 100644
--- a/ui/src/features/dags/components/visualization/Graph.tsx
+++ b/ui/src/features/dags/components/visualization/Graph.tsx
@@ -124,9 +124,8 @@ function Graph({
     justifyContent: 'flex-start',
     width: width,
     minWidth: '100%',
-    minHeight: '200px',
-    maxHeight: isExpandedView ? 'none' : '300px',
-    height: isExpandedView ? '100%' : 'auto',
+    minHeight: isExpandedView ? '100%' : '380px',
+    height: isExpandedView ? '100%' : '380px',
     borderRadius: '0.5em',
     background: isDarkMode
       ? `linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
@@ -383,6 +382,7 @@ function Graph({
           style={mermaidStyle}
           def={graph}
           scale={scale}
+          onClick={onRightClickNode}
           onDoubleClick={onClickNode}
           onRightClick={onRightClickNode}
         />
diff --git a/ui/src/features/system-status/components/PathsCard.tsx b/ui/src/features/system-status/components/PathsCard.tsx
index 4a07e6b96..65907c449 100644
--- a/ui/src/features/system-status/components/PathsCard.tsx
+++ b/ui/src/features/system-status/components/PathsCard.tsx
@@ -1,6 +1,12 @@
-import { Check, Copy, FolderOpen, X } from 'lucide-react';
+import { Check, Copy, FolderOpen } from 'lucide-react';
 import React from 'react';
 import { Button } from '../../../components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '../../../components/ui/dialog';
 import { useConfig, type PathsConfig } from '../../../contexts/ConfigContext';
 import { cn } from '../../../lib/utils';
 
@@ -23,12 +29,12 @@ function PathItem({ label, path }: PathItemProps) {
   };
 
   return (
-    <div className="flex items-center gap-2 py-0.5 group text-[11px]">
-      <span className="text-muted-foreground shrink-0 w-20">{label}</span>
+    <div className="flex items-center gap-2 py-1 group text-sm">
+      <span className="text-muted-foreground shrink-0 w-24">{label}</span>
       <code
         className={cn(
-          'font-mono px-1 py-0.5 rounded truncate flex-1',
-          'bg-muted text-muted-foreground'
+          'font-mono px-2 py-1 rounded truncate flex-1 text-xs',
+          'bg-muted text-foreground'
         )}
         title={path}
       >
@@ -37,26 +43,21 @@ function PathItem({ label, path }: PathItemProps) {
       <button
         onClick={handleCopy}
         className={cn(
-          'p-0.5 rounded transition-all shrink-0',
+          'p-1 rounded transition-all shrink-0',
           'opacity-0 group-hover:opacity-100',
-          'hover:bg-accent',
+          'hover:bg-accent text-muted-foreground hover:text-foreground',
           copied && 'opacity-100 text-success'
         )}
         title="Copy path"
       >
-        {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
       </button>
     </div>
   );
 }
 
-function PathsDialog({
-  open,
-  onClose,
-}: {
-  open: boolean;
-  onClose: () => void;
-}) {
+function PathsCard() {
+  const [open, setOpen] = React.useState(false);
   const config = useConfig();
   const paths: PathsConfig = config.paths;
 
@@ -76,56 +77,37 @@ function PathsDialog({
     ];
   }, [paths]);
 
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
-      <div className="relative bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 border border-indigo-500/30 rounded-xl w-full max-w-lg mx-4 shadow-2xl">
-        <div className="flex items-center justify-between p-3 border-b border-indigo-500/20">
-          <div className="flex items-center gap-1.5">
-            <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
-            <span className="text-xs font-medium">System Paths</span>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 rounded hover:bg-muted transition-colors"
-          >
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-        <div className="p-4">
-          {paths ? (
-            <div className="space-y-0">
-              {pathItems.map((item) => (
-                <PathItem
-                  key={item.label}
-                  label={item.label}
-                  path={item.path}
-                />
-              ))}
-            </div>
-          ) : (
-            <div className="text-xs text-muted-foreground py-2">
-              No path information available
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function PathsCard() {
-  const [open, setOpen] = React.useState(false);
-
   return (
     <>
       <Button onClick={() => setOpen(true)}>
         <FolderOpen className="h-4 w-4" />
         Paths
       </Button>
-      <PathsDialog open={open} onClose={() => setOpen(false)} />
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FolderOpen className="h-4 w-4" />
+              System Paths
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-1">
+            {paths ? (
+              pathItems.map((item) => (
+                <PathItem
+                  key={item.label}
+                  label={item.label}
+                  path={item.path}
+                />
+              ))
+            ) : (
+              <div className="text-sm text-muted-foreground py-2">
+                No path information available
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/ui/src/ui/Mermaid.tsx b/ui/src/ui/Mermaid.tsx
index 6b3fd3752..24af65ed7 100644
--- a/ui/src/ui/Mermaid.tsx
+++ b/ui/src/ui/Mermaid.tsx
@@ -5,6 +5,7 @@ type Props = {
   def: string;
   style?: CSSProperties;
   scale: number;
+  onClick?: (id: string) => void;
   onDoubleClick?: (id: string) => void;
   onRightClick?: (id: string) => void;
 };
@@ -54,6 +55,7 @@ function Mermaid({
   def,
   style = {},
   scale,
+  onClick,
   onDoubleClick,
   onRightClick,
 }: Props) {
@@ -136,9 +138,14 @@ function Mermaid({
         }
 
         // Attach custom event handlers if provided
-        if ((onDoubleClick || onRightClick) && mermaidRef.current) {
+        if ((onClick || onDoubleClick || onRightClick) && mermaidRef.current) {
           // Find all nodes in the SVG (typically these are <g> elements with class="node")
           const nodeElements = mermaidRef.current.querySelectorAll('.node');
+          // Store click timeouts per node for cancellation
+          const clickTimeouts = new Map<
+            string,
+            ReturnType<typeof setTimeout>
+          >();
 
           nodeElements.forEach((node) => {
             // Extract the node ID from the element
@@ -146,9 +153,33 @@ function Mermaid({
             const nodeId = node.id.split('-')[1];
 
             if (nodeId) {
+              // Attach single-click event listener if provided
+              if (onClick) {
+                node.addEventListener('click', () => {
+                  // Clear any existing timeout for this node
+                  const existingTimeout = clickTimeouts.get(nodeId);
+                  if (existingTimeout) {
+                    clearTimeout(existingTimeout);
+                  }
+                  // Set timeout to allow double-click to cancel
+                  const timeout = setTimeout(() => {
+                    clickTimeouts.delete(nodeId);
+                    onClick(nodeId);
+                  }, 250);
+                  clickTimeouts.set(nodeId, timeout);
+                });
+              }
+
               // Attach double-click event listener if provided
               if (onDoubleClick) {
-                node.addEventListener('dblclick', () => {
+                node.addEventListener('dblclick', (event) => {
+                  event.stopPropagation();
+                  // Cancel pending single-click action
+                  const existingTimeout = clickTimeouts.get(nodeId);
+                  if (existingTimeout) {
+                    clearTimeout(existingTimeout);
+                    clickTimeouts.delete(nodeId);
+                  }
                   onDoubleClick(nodeId);
                 });
               }
@@ -157,6 +188,12 @@ function Mermaid({
               if (onRightClick) {
                 node.addEventListener('contextmenu', (event) => {
                   event.preventDefault(); // Prevent default context menu
+                  // Also cancel pending single-click
+                  const existingTimeout = clickTimeouts.get(nodeId);
+                  if (existingTimeout) {
+                    clearTimeout(existingTimeout);
+                    clickTimeouts.delete(nodeId);
+                  }
                   onRightClick(nodeId);
                 });
               }

From 1ae8c4d8bef1d66e37df043357566de2f044f3da Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sat, 17 Jan 2026 22:54:10 +0900
Subject: [PATCH 04/19] wip

---
 ui/src/styles/global.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index b737c082f..caf07d797 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -65,7 +65,7 @@
     --card-foreground: #020617;
     --popover: #ffffff;
     --popover-foreground: #020617;
-    --primary: #6366f1;
+    --primary: #ea580c;
     --primary-foreground: #ffffff;
     --secondary: #f1f5f9;
     --secondary-foreground: #020617;
@@ -77,7 +77,7 @@
     --destructive-foreground: #ffffff;
     --border: #e2e8f0;
     --input: #e2e8f0;
-    --ring: #6366f1;
+    --ring: #ea580c;
     --success: #10b981;
     --warning: #f59e0b;
     --info: #0ea5e9;
@@ -88,9 +88,9 @@
     --sidebar-border: #e2e8f0;
 
     /* Button Tokens mapping */
-    --btn-primary-top: #6366f1;
-    --btn-primary-bottom: #4f46e5;
-    --btn-primary-border: #4338ca;
+    --btn-primary-top: #f97316;
+    --btn-primary-bottom: #ea580c;
+    --btn-primary-border: #c2410c;
 
     --btn-secondary-top: #ffffff;
     --btn-secondary-bottom: #f8fafc;

From bc9990d85d168bae6ae2f7ae26d91615900595d9 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 01:37:59 +0900
Subject: [PATCH 05/19] wip

---
 ui/src/features/dashboard/components/DashboardTimechart.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/src/features/dashboard/components/DashboardTimechart.tsx b/ui/src/features/dashboard/components/DashboardTimechart.tsx
index 970b26c71..83e35c4d9 100644
--- a/ui/src/features/dashboard/components/DashboardTimechart.tsx
+++ b/ui/src/features/dashboard/components/DashboardTimechart.tsx
@@ -565,6 +565,9 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
         .vis-timeline .vis-panel {
           border-color: var(--border) !important;
         }
+        .vis-timeline .vis-panel.vis-left {
+          display: none !important;
+        }
         .vis-item .vis-item-overflow {
           overflow: visible;
           color: var(--foreground);

From d39d44e1276ebf9f1098667a16b0f0ab152817f6 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 01:45:27 +0900
Subject: [PATCH 06/19] update button color of lightmode

---
 ui/src/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index caf07d797..d5318f561 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -94,8 +94,8 @@
 
     --btn-secondary-top: #ffffff;
     --btn-secondary-bottom: #f8fafc;
-    --btn-secondary-border: #e2e8f0;
-    --btn-secondary-platform: #cbd5e1;
+    --btn-secondary-border: #ea580c;
+    --btn-secondary-platform: #ea580c;
 
     /* RGB fallbacks for legacy components */
     --bg: 255 255 255;

From 42cc305066c1cc1a545a56b0c7347ce383611633 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 01:55:45 +0900
Subject: [PATCH 07/19] fix height

---
 ui/src/pages/dags/index.tsx | 49 ++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/ui/src/pages/dags/index.tsx b/ui/src/pages/dags/index.tsx
index 3ff319886..1d6c08ffa 100644
--- a/ui/src/pages/dags/index.tsx
+++ b/ui/src/pages/dags/index.tsx
@@ -48,7 +48,8 @@ function DAGsContent() {
   const searchState = useSearchState();
   const remoteKey = appBarContext.selectedRemoteNode || 'local';
   const { preferences, updatePreference } = useUserPreferences();
-  const { tabs, activeTabId, selectDAG, addTab, closeTab, getActiveFileName } = useTabContext();
+  const { tabs, activeTabId, selectDAG, addTab, closeTab, getActiveFileName } =
+    useTabContext();
 
   const defaultFilters = React.useMemo<DAGDefinitionsFilters>(
     () => ({
@@ -236,7 +237,6 @@ function DAGsContent() {
     };
   }, [data]);
 
-
   const pageChange = (page: number) => {
     addSearchParam('page', page.toString());
     setPage(page);
@@ -293,7 +293,7 @@ function DAGsContent() {
   const displayData = data || lastValidData;
 
   const leftPanel = (
-    <div className="pr-2">
+    <div className="pr-2 pt-4 md:pt-6 lg:pt-8">
       <DAGListHeader onRefresh={refreshFn} />
       {displayData ? (
         <>
@@ -336,8 +336,8 @@ function DAGsContent() {
   // Handle adding a new tab - creates an empty tab that will be filled on next DAG selection
   const handleAddTab = () => {
     // Find a DAG to open in the new tab (first one not already open)
-    const openFileNames = new Set(tabs.map(t => t.fileName));
-    const availableDAG = dagFiles.find(d => !openFileNames.has(d.fileName));
+    const openFileNames = new Set(tabs.map((t) => t.fileName));
+    const availableDAG = dagFiles.find((d) => !openFileNames.has(d.fileName));
     if (availableDAG) {
       addTab(availableDAG.fileName, availableDAG.dag.name);
     }
@@ -350,27 +350,30 @@ function DAGsContent() {
     }
   };
 
-  const rightPanel = tabs.length > 0 ? (
-    <div className="flex flex-col h-full">
-      <TabBar onAddTab={handleAddTab} />
-      <div className="flex-1 overflow-hidden">
-        {selectedDAG && (
-          <DAGDetailsPanel
-            fileName={selectedDAG}
-            onClose={handleCloseActiveTab}
-          />
-        )}
+  const rightPanel =
+    tabs.length > 0 ? (
+      <div className="flex flex-col h-full">
+        <TabBar onAddTab={handleAddTab} />
+        <div className="flex-1 overflow-hidden">
+          {selectedDAG && (
+            <DAGDetailsPanel
+              fileName={selectedDAG}
+              onClose={handleCloseActiveTab}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  ) : null;
+    ) : null;
 
   return (
-    <SplitLayout
-      leftPanel={leftPanel}
-      rightPanel={rightPanel}
-      defaultLeftWidth={40}
-      emptyRightMessage="Select a DAG to view details"
-    />
+    <div className="-my-4 md:-my-6 lg:-my-8 h-[calc(100%+2rem)] md:h-[calc(100%+3rem)] lg:h-[calc(100%+4rem)]">
+      <SplitLayout
+        leftPanel={leftPanel}
+        rightPanel={rightPanel}
+        defaultLeftWidth={40}
+        emptyRightMessage="Select a DAG to view details"
+      />
+    </div>
   );
 }
 

From dad669d4079f65f47b18dc1094eb108a4d65a3cd Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 01:55:54 +0900
Subject: [PATCH 08/19] Revert "update button color of lightmode"

This reverts commit d39d44e1276ebf9f1098667a16b0f0ab152817f6.
---
 ui/src/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index d5318f561..caf07d797 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -94,8 +94,8 @@
 
     --btn-secondary-top: #ffffff;
     --btn-secondary-bottom: #f8fafc;
-    --btn-secondary-border: #ea580c;
-    --btn-secondary-platform: #ea580c;
+    --btn-secondary-border: #e2e8f0;
+    --btn-secondary-platform: #cbd5e1;
 
     /* RGB fallbacks for legacy components */
     --bg: 255 255 255;

From dedce65c21488ad26f6a8361b4f41f14ea701f6a Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 01:58:36 +0900
Subject: [PATCH 09/19] fix graph color

---
 ui/src/pages/system-status/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/system-status/index.tsx b/ui/src/pages/system-status/index.tsx
index 473bad81e..5fa43ed7b 100644
--- a/ui/src/pages/system-status/index.tsx
+++ b/ui/src/pages/system-status/index.tsx
@@ -217,28 +217,28 @@ function SystemStatus() {
         <ResourceChart
           title="CPU Usage"
           data={resourceData?.cpu}
-          color="var(--primary)"
+          color="#73BF69"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Memory Usage"
           data={resourceData?.memory}
-          color="var(--info)"
+          color="#73BF69"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Disk Usage"
           data={resourceData?.disk}
-          color="var(--success)"
+          color="#73BF69"
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}
         />
         <ResourceChart
           title="Load Average"
           data={resourceData?.load}
-          color="var(--warning)"
+          color="#73BF69"
           unit=""
           isLoading={!resourceData && !resourceError}
           error={resourceError ? String(resourceError) : undefined}

From efadbb61b8acf93e4443af12b3b0ef485b6048f5 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 02:03:05 +0900
Subject: [PATCH 10/19] refactor

---
 .../dags/components/common/NodeStatusChip.tsx | 23 +++++++-----
 .../dags/components/common/StatusDot.tsx      | 36 +++++++++----------
 .../components/DashboardTimechart.tsx         |  8 ++---
 ui/src/ui/StatusChip.tsx                      | 32 ++++++++---------
 4 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/ui/src/features/dags/components/common/NodeStatusChip.tsx b/ui/src/features/dags/components/common/NodeStatusChip.tsx
index e617a5928..2ed014218 100644
--- a/ui/src/features/dags/components/common/NodeStatusChip.tsx
+++ b/ui/src/features/dags/components/common/NodeStatusChip.tsx
@@ -49,28 +49,35 @@ function NodeStatusChip({ status, children, size = 'md' }: Props) {
       statusIcon = '✓';
       break;
     case NodeStatus.Failed:
+      statusClass = 'status-failed';
+      statusIcon = '✕';
+      break;
     case NodeStatus.Rejected:
       statusClass = 'status-failed';
-      statusIcon = status === NodeStatus.Failed ? '✕' : '⊘';
+      statusIcon = '⊘';
       break;
     case NodeStatus.Running:
       statusClass = 'status-running';
       break;
     case NodeStatus.NotStarted:
+      statusClass = 'status-info';
+      statusIcon = '○';
+      break;
     case NodeStatus.Skipped:
       statusClass = 'status-info';
-      statusIcon = status === NodeStatus.Skipped ? '―' : '○';
+      statusIcon = '―';
       break;
     case NodeStatus.PartialSuccess:
+      statusClass = 'status-warning';
+      statusIcon = '◐';
+      break;
     case NodeStatus.Waiting:
+      statusClass = 'status-warning';
+      statusIcon = '□';
+      break;
     case NodeStatus.Aborted:
       statusClass = 'status-warning';
-      statusIcon =
-        status === NodeStatus.Aborted
-          ? '■'
-          : status === NodeStatus.PartialSuccess
-            ? '◐'
-            : '□';
+      statusIcon = '■';
       break;
     default:
       statusClass = 'status-muted';
diff --git a/ui/src/features/dags/components/common/StatusDot.tsx b/ui/src/features/dags/components/common/StatusDot.tsx
index 3e3cccb50..40e8beff5 100644
--- a/ui/src/features/dags/components/common/StatusDot.tsx
+++ b/ui/src/features/dags/components/common/StatusDot.tsx
@@ -1,40 +1,40 @@
 import { Status } from '@/api/v2/schema';
+import React from 'react';
 
 type Props = {
   status: Status;
   statusLabel?: string;
 };
 
-export function StatusDot({ status, statusLabel }: Props) {
-  // Match colors from StatusChip.tsx
-  let bgColor = '';
-  let animation = '';
+type StatusStyle = {
+  bgColor: string;
+  animation: string;
+};
 
+function getStatusStyle(status: Status): StatusStyle {
   switch (status) {
     case Status.Success:
-      bgColor = 'bg-success';
-      break;
+      return { bgColor: 'bg-success', animation: '' };
     case Status.Failed:
     case Status.Rejected:
-      bgColor = 'bg-destructive';
-      break;
+      return { bgColor: 'bg-destructive', animation: '' };
     case Status.Running:
-      bgColor = 'bg-primary';
-      animation = 'animate-pulse';
-      break;
+      return { bgColor: 'bg-primary', animation: 'animate-pulse' };
     case Status.Queued:
     case Status.NotStarted:
-      bgColor = 'bg-info';
-      break;
+      return { bgColor: 'bg-info', animation: '' };
     case Status.PartialSuccess:
-    case Status.Waiting:
     case Status.Aborted:
-      bgColor = 'bg-warning';
-      if (status === Status.Waiting) animation = 'animate-pulse';
-      break;
+      return { bgColor: 'bg-warning', animation: '' };
+    case Status.Waiting:
+      return { bgColor: 'bg-warning', animation: 'animate-pulse' };
     default:
-      bgColor = 'bg-muted';
+      return { bgColor: 'bg-muted', animation: '' };
   }
+}
+
+export function StatusDot({ status, statusLabel }: Props): React.JSX.Element {
+  const { bgColor, animation } = getStatusStyle(status);
 
   return (
     <span
diff --git a/ui/src/features/dashboard/components/DashboardTimechart.tsx b/ui/src/features/dashboard/components/DashboardTimechart.tsx
index 83e35c4d9..34035ee60 100644
--- a/ui/src/features/dashboard/components/DashboardTimechart.tsx
+++ b/ui/src/features/dashboard/components/DashboardTimechart.tsx
@@ -417,12 +417,8 @@ function DashboardTimeChart({ data: input, selectedDate }: Props) {
     if (timelineInstance.current) {
       try {
         timelineInstance.current.fit();
-      } catch {
-        try {
-          timelineInstance.current.fit();
-        } catch (fitError) {
-          console.warn('Timeline fit failed:', fitError);
-        }
+      } catch (error) {
+        console.warn('Timeline fit failed:', error);
       }
     }
   };
diff --git a/ui/src/ui/StatusChip.tsx b/ui/src/ui/StatusChip.tsx
index 749973224..0cc7d98ce 100644
--- a/ui/src/ui/StatusChip.tsx
+++ b/ui/src/ui/StatusChip.tsx
@@ -9,34 +9,34 @@ type Props = {
   size?: 'xs' | 'sm' | 'md' | 'lg'; // Size variants
 };
 
-function StatusChip({ status, children, size = 'md' }: Props) {
-  // Determine the colors and icon based on status
-  let statusClass = '';
-  const isRunning = status === Status.Running;
-
+function getStatusClass(status?: Status): string {
   switch (status) {
     case Status.Success:
-      statusClass = 'status-success';
-      break;
+      return 'status-success';
     case Status.Failed:
     case Status.Rejected:
-      statusClass = 'status-failed';
-      break;
+      return 'status-failed';
     case Status.Running:
-      statusClass = 'status-running';
-      break;
+      return 'status-running';
     case Status.Queued:
     case Status.NotStarted:
-      statusClass = 'status-info';
-      break;
+      return 'status-info';
     case Status.PartialSuccess:
     case Status.Waiting:
     case Status.Aborted:
-      statusClass = 'status-warning';
-      break;
+      return 'status-warning';
     default:
-      statusClass = 'status-muted';
+      return 'status-muted';
   }
+}
+
+function StatusChip({
+  status,
+  children,
+  size = 'md',
+}: Props): React.JSX.Element {
+  const statusClass = getStatusClass(status);
+  const isRunning = status === Status.Running;
 
   // Size classes
   const sizeClasses = {

From 33263c8ca4b3cba00b69380d885730c97e2e3e46 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 11:29:12 +0900
Subject: [PATCH 11/19] fix build error and apply review comments

---
 ui/src/App.tsx                                | 23 +++++++------
 ui/src/components/ui/tabs.tsx                 |  2 +-
 ui/src/components/ui/toggle-group.tsx         |  2 +-
 .../features/queues/components/QueueCard.tsx  |  2 +-
 ui/src/menu.tsx                               |  4 ++-
 ui/src/styles/global.css                      | 12 ++++++-
 ui/src/ui/Mermaid.tsx                         | 34 ++++++++++++-------
 7 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 6cba1ae24..fa9de13d5 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -74,21 +74,24 @@ function AppInner({ config }: Props) {
   const [selectedRemoteNode, setSelectedRemoteNode] =
     React.useState<string>(getInitialNode);
 
-  const handleSelectRemoteNode = (node: string) => {
-    if (remoteNodes.includes(node)) {
-      setSelectedRemoteNode(node);
-      localStorage.setItem(localStorageKey, node);
-    } else {
-      setSelectedRemoteNode('local');
-      localStorage.setItem(localStorageKey, 'local');
-    }
-  };
+  const handleSelectRemoteNode = React.useCallback(
+    (node: string) => {
+      if (remoteNodes.includes(node)) {
+        setSelectedRemoteNode(node);
+        localStorage.setItem(localStorageKey, node);
+      } else {
+        setSelectedRemoteNode('local');
+        localStorage.setItem(localStorageKey, 'local');
+      }
+    },
+    [remoteNodes, localStorageKey]
+  );
 
   React.useEffect(() => {
     if (!remoteNodes.includes(selectedRemoteNode)) {
       handleSelectRemoteNode('local');
     }
-  }, [remoteNodes, selectedRemoteNode]);
+  }, [remoteNodes, selectedRemoteNode, handleSelectRemoteNode]);
 
   // Effect to apply theme class to html element
   React.useEffect(() => {
diff --git a/ui/src/components/ui/tabs.tsx b/ui/src/components/ui/tabs.tsx
index 5f6bfb3ef..d50420d6a 100644
--- a/ui/src/components/ui/tabs.tsx
+++ b/ui/src/components/ui/tabs.tsx
@@ -39,7 +39,7 @@ function Tab({
 
   if (asChild) {
     return (
-      <span className={classes} {...props}>
+      <span className={classes} role="button" tabIndex={0} {...props}>
         {children}
       </span>
     );
diff --git a/ui/src/components/ui/toggle-group.tsx b/ui/src/components/ui/toggle-group.tsx
index a8b3fb594..a7ff50329 100644
--- a/ui/src/components/ui/toggle-group.tsx
+++ b/ui/src/components/ui/toggle-group.tsx
@@ -102,7 +102,7 @@ export const ToggleButton = ({
         'inline-flex items-center justify-center h-8 px-4 text-xs font-bold transition-all rounded-md cursor-pointer',
         isSelected
           ? 'bg-primary text-primary-foreground shadow-sm scale-100'
-          : 'text-muted-foreground hover:bg-white/10 hover:text-foreground active:scale-95',
+          : 'text-muted-foreground hover:bg-muted hover:text-foreground active:scale-95',
         className
       )}
       onClick={onClick}
diff --git a/ui/src/features/queues/components/QueueCard.tsx b/ui/src/features/queues/components/QueueCard.tsx
index 7d9f28e99..663f85135 100644
--- a/ui/src/features/queues/components/QueueCard.tsx
+++ b/ui/src/features/queues/components/QueueCard.tsx
@@ -179,7 +179,7 @@ function QueueCard({
   return (
     <div
       className={cn(
-        'card-obsidian transition-all duration-300 hover:bg-white/[0.05] hover:border-white/10',
+        'card-obsidian transition-all duration-300 dark:hover:bg-white/[0.05] dark:hover:border-white/10',
         isSelected &&
           'ring-1 ring-primary/40 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)]'
       )}
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index 04db8e375..909b9a141 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -51,7 +51,9 @@ type MainListItemsProps = {
 // NavItem component with Obsidian Deep styling
 function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
   const location = useLocation();
-  const isActive = location.pathname.startsWith(to);
+  const isActive =
+    location.pathname === to ||
+    (to !== '/' && location.pathname.startsWith(to + '/'));
 
   return (
     <div className={cn('px-1', !isOpen && 'flex justify-center')}>
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index caf07d797..e05004731 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -78,7 +78,7 @@
     --border: #e2e8f0;
     --input: #e2e8f0;
     --ring: #ea580c;
-    --success: #10b981;
+    --success: #059669;
     --warning: #f59e0b;
     --info: #0ea5e9;
     --surface: #ffffff;
@@ -102,6 +102,7 @@
     --text: 2 6 23;
     --sidebar-bg: 248 250 252;
     --sidebar-text: 71 85 105;
+    --primary-rgb: 234 88 12;
   }
 
   .dark {
@@ -285,6 +286,15 @@
 .status-running {
   @apply bg-primary/10 text-primary border border-primary/20 animate-pulse;
 }
+.status-info {
+  @apply bg-info/10 text-info border border-info/20;
+}
+.status-warning {
+  @apply bg-warning/10 text-warning border border-warning/20;
+}
+.status-muted {
+  @apply bg-muted text-muted-foreground border border-muted-foreground/20;
+}
 
 /* Obsidian Card Utility - Unified containers */
 .card-obsidian {
diff --git a/ui/src/ui/Mermaid.tsx b/ui/src/ui/Mermaid.tsx
index 24af65ed7..2595ccc0d 100644
--- a/ui/src/ui/Mermaid.tsx
+++ b/ui/src/ui/Mermaid.tsx
@@ -62,6 +62,9 @@ function Mermaid({
   const mermaidRef = React.useRef<HTMLDivElement>(null); // Ref for the inner div holding the SVG
   const scrollContainerRef = React.useRef<HTMLDivElement>(null); // Ref for the outer scrollable div
   const scrollPosRef = React.useRef({ top: 0, left: 0 }); // Ref to store scroll position
+  const clickTimeoutsRef = React.useRef<
+    Map<string, ReturnType<typeof setTimeout>>
+  >(new Map()); // Persistent timeout storage
   const [uniqueId] = React.useState(
     () => `mermaid-${Math.random().toString(36).substr(2, 9)}`
   );
@@ -139,13 +142,12 @@ function Mermaid({
 
         // Attach custom event handlers if provided
         if ((onClick || onDoubleClick || onRightClick) && mermaidRef.current) {
+          // Clear existing timeouts before setting up new handlers
+          clickTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+          clickTimeoutsRef.current.clear();
+
           // Find all nodes in the SVG (typically these are <g> elements with class="node")
           const nodeElements = mermaidRef.current.querySelectorAll('.node');
-          // Store click timeouts per node for cancellation
-          const clickTimeouts = new Map<
-            string,
-            ReturnType<typeof setTimeout>
-          >();
 
           nodeElements.forEach((node) => {
             // Extract the node ID from the element
@@ -157,16 +159,16 @@ function Mermaid({
               if (onClick) {
                 node.addEventListener('click', () => {
                   // Clear any existing timeout for this node
-                  const existingTimeout = clickTimeouts.get(nodeId);
+                  const existingTimeout = clickTimeoutsRef.current.get(nodeId);
                   if (existingTimeout) {
                     clearTimeout(existingTimeout);
                   }
                   // Set timeout to allow double-click to cancel
                   const timeout = setTimeout(() => {
-                    clickTimeouts.delete(nodeId);
+                    clickTimeoutsRef.current.delete(nodeId);
                     onClick(nodeId);
                   }, 250);
-                  clickTimeouts.set(nodeId, timeout);
+                  clickTimeoutsRef.current.set(nodeId, timeout);
                 });
               }
 
@@ -175,10 +177,10 @@ function Mermaid({
                 node.addEventListener('dblclick', (event) => {
                   event.stopPropagation();
                   // Cancel pending single-click action
-                  const existingTimeout = clickTimeouts.get(nodeId);
+                  const existingTimeout = clickTimeoutsRef.current.get(nodeId);
                   if (existingTimeout) {
                     clearTimeout(existingTimeout);
-                    clickTimeouts.delete(nodeId);
+                    clickTimeoutsRef.current.delete(nodeId);
                   }
                   onDoubleClick(nodeId);
                 });
@@ -189,10 +191,10 @@ function Mermaid({
                 node.addEventListener('contextmenu', (event) => {
                   event.preventDefault(); // Prevent default context menu
                   // Also cancel pending single-click
-                  const existingTimeout = clickTimeouts.get(nodeId);
+                  const existingTimeout = clickTimeoutsRef.current.get(nodeId);
                   if (existingTimeout) {
                     clearTimeout(existingTimeout);
-                    clickTimeouts.delete(nodeId);
+                    clickTimeoutsRef.current.delete(nodeId);
                   }
                   onRightClick(nodeId);
                 });
@@ -263,6 +265,14 @@ function Mermaid({
     }
   }, [scale]); // Apply scale separately
 
+  // Cleanup timeouts on unmount or when def changes
+  React.useEffect(() => {
+    return () => {
+      clickTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      clickTimeoutsRef.current.clear();
+    };
+  }, [def]);
+
   return (
     // Attach ref to the scrollable container
     <div ref={scrollContainerRef} style={dStyle}>

From e7d713f34c6cb41fd664eadf0cc2b53172ec17f4 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 12:20:25 +0900
Subject: [PATCH 12/19] fix

---
 ui/src/menu.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index 909b9a141..f3a39c73e 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -117,7 +117,12 @@ export const mainListItems = React.forwardRef<
   return (
     <div ref={ref} className="flex flex-col h-full">
       {/* Sidebar Header */}
-      <div className="h-14 relative mb-6 flex items-center px-3 border-b border-white/[0.03]">
+      <div
+        className={cn(
+          'h-14 relative mb-6 flex items-center border-b border-white/[0.03]',
+          isOpen ? 'px-3' : 'justify-center'
+        )}
+      >
         {isOpen ? (
           <>
             <div className="flex-1 flex items-center gap-2 truncate">
@@ -139,7 +144,7 @@ export const mainListItems = React.forwardRef<
         ) : (
           <button
             onClick={onToggle}
-            className="mx-auto w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 transition-all text-foreground glow-sm active:scale-95"
+            className="w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 transition-all text-foreground glow-sm active:scale-95"
             aria-label="Expand sidebar"
           >
             <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
@@ -156,7 +161,7 @@ export const mainListItems = React.forwardRef<
             if (!context.remoteNodes || context.remoteNodes.length === 0)
               return null;
             return (
-              <div className="px-1">
+              <div className={cn('px-1', !isOpen && 'flex justify-center')}>
                 {isOpen ? (
                   <Select
                     value={context.selectedRemoteNode}

From e3f0cb6a74d886b8eae5e8e4ac848b5909b7d7a4 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 12:39:56 +0900
Subject: [PATCH 13/19] fix sidebar issues

---
 ui/index.html             |  2 +-
 ui/src/layouts/Layout.tsx |  2 +-
 ui/src/menu.tsx           | 48 +++++++++++++++++++++++++++++----------
 ui/src/styles/global.css  | 34 +++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 12843e60b..9bfefd412 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -18,7 +18,7 @@
           apiURL: 'http://localhost:8080/api/v2',
           basePath: '',
           title: 'Test Environment',
-          navbarColor: '',
+          navbarColor: 'white',
           version: 'dev',
           tz: '',
           tzOffsetInSec: undefined,
diff --git a/ui/src/layouts/Layout.tsx b/ui/src/layouts/Layout.tsx
index f34123d57..9b8f5b631 100644
--- a/ui/src/layouts/Layout.tsx
+++ b/ui/src/layouts/Layout.tsx
@@ -84,7 +84,7 @@ function Content({ navbarColor, children }: LayoutProps) {
     ? ({
         backgroundColor: navbarColor,
         color: contrastColor,
-        '--sidebar-text': contrastColor,
+        '--sidebar-foreground': contrastColor,
       } as React.CSSProperties)
     : undefined;
   // Sidebar state with localStorage persistence
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index f3a39c73e..27ba09306 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -104,7 +104,7 @@ function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
 export const mainListItems = React.forwardRef<
   HTMLDivElement,
   MainListItemsProps
->(({ isOpen = false, onNavItemClick, onToggle }, ref) => {
+>(({ isOpen = false, onNavItemClick, onToggle, customColor }, ref) => {
   const config = useConfig();
   const isAdmin = useIsAdmin();
   const { preferences, updatePreference } = useUserPreferences();
@@ -126,16 +126,20 @@ export const mainListItems = React.forwardRef<
         {isOpen ? (
           <>
             <div className="flex-1 flex items-center gap-2 truncate">
-              <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
-                <span className="text-white font-bold text-sm">D</span>
-              </div>
-              <span className="font-bold tracking-tight text-lg text-foreground select-none truncate">
+              {!customColor && (
+                <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
+                  <span className="text-white font-bold text-sm">
+                    {(config.title || 'Dagu').charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+              <span className="font-bold tracking-tight text-lg text-sidebar-foreground select-none truncate">
                 {config.title || 'Dagu'}
               </span>
             </div>
             <button
               onClick={onToggle}
-              className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-white/5 rounded-lg transition-all"
+              className="p-1.5 text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-white/5 rounded-lg transition-all"
               aria-label="Collapse sidebar"
             >
               <PanelLeft size={18} />
@@ -144,12 +148,24 @@ export const mainListItems = React.forwardRef<
         ) : (
           <button
             onClick={onToggle}
-            className="w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 transition-all text-foreground glow-sm active:scale-95"
+            className={cn(
+              'w-10 h-10 flex items-center justify-center rounded-xl transition-all active:scale-95',
+              !customColor &&
+                'bg-white/5 hover:bg-white/10 text-foreground glow-sm'
+            )}
             aria-label="Expand sidebar"
           >
-            <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
-              <span className="text-white font-bold text-sm">D</span>
-            </div>
+            {customColor ? (
+              <span className="text-xl font-bold text-sidebar-foreground">
+                {(config.title || 'Dagu').charAt(0).toUpperCase()}
+              </span>
+            ) : (
+              <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
+                <span className="text-white font-bold text-sm">
+                  {(config.title || 'Dagu').charAt(0).toUpperCase()}
+                </span>
+              </div>
+            )}
           </button>
         )}
       </div>
@@ -187,7 +203,10 @@ export const mainListItems = React.forwardRef<
                     onValueChange={context.selectRemoteNode}
                   >
                     <SelectTrigger className="w-10 h-10 p-0 bg-white/5 border-white/5 hover:bg-white/10 [&>svg:last-child]:hidden flex items-center justify-center rounded-lg transition-all">
-                      <Globe size={18} className="text-primary" />
+                      <Globe
+                        size={18}
+                        className={customColor ? 'opacity-80' : 'text-primary'}
+                      />
                     </SelectTrigger>
                     <SelectContent>
                       {context.remoteNodes.map((node) => (
@@ -331,7 +350,12 @@ export const mainListItems = React.forwardRef<
                 : `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`
             }
           >
-            <div className="flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
+            <div
+              className={cn(
+                'flex items-center justify-center group-hover:scale-110 transition-transform',
+                customColor ? 'opacity-80' : 'text-primary'
+              )}
+            >
               {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
             </div>
             {isOpen && (
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index e05004731..d8c062ca1 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -343,3 +343,37 @@
   background: linear-gradient(to bottom, #161b3d, #111432) !important;
   border-color: rgba(255, 255, 255, 0.1) !important;
 }
+
+/* Custom sidebar color - inherit text color from parent */
+.custom-sidebar-color,
+.custom-sidebar-color * {
+  --sidebar-foreground: currentColor;
+}
+.custom-sidebar-color .text-sidebar-foreground,
+.custom-sidebar-color .text-muted-foreground,
+.custom-sidebar-color .text-foreground,
+.custom-sidebar-color .text-primary {
+  color: inherit !important;
+}
+.custom-sidebar-color .text-muted-foreground\/50,
+.custom-sidebar-color .text-muted-foreground\/70,
+.custom-sidebar-color .text-sidebar-foreground\/50 {
+  color: inherit !important;
+  opacity: 0.6;
+}
+.custom-sidebar-color .opacity-70 {
+  opacity: 0.7;
+}
+/* SVG icons should inherit color */
+.custom-sidebar-color svg,
+.custom-sidebar-color svg.lucide,
+.custom-sidebar-color .lucide {
+  color: inherit !important;
+  stroke: currentColor !important;
+}
+.custom-sidebar-color svg.text-primary,
+.custom-sidebar-color .text-primary.lucide,
+.custom-sidebar-color svg.text-sidebar-foreground,
+.custom-sidebar-color svg.text-muted-foreground {
+  color: inherit !important;
+}

From 75e9e63d02acb3927cf3553fda3a3dc33caf21fc Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 12:40:11 +0900
Subject: [PATCH 14/19] fix sidebar issues

---
 ui/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/index.html b/ui/index.html
index 9bfefd412..12843e60b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -18,7 +18,7 @@
           apiURL: 'http://localhost:8080/api/v2',
           basePath: '',
           title: 'Test Environment',
-          navbarColor: 'white',
+          navbarColor: '',
           version: 'dev',
           tz: '',
           tzOffsetInSec: undefined,

From 507f9b37a4af510ded80ca22258f46045222c830 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 15:01:00 +0900
Subject: [PATCH 15/19] fix subdag issues

---
 api/v2/api.gen.go                             | 724 +++++++++++-------
 api/v2/api.yaml                               |  43 ++
 internal/service/frontend/api/v2/dagruns.go   |  28 +
 ui/src/api/v2/schema.ts                       |  71 ++
 ui/src/features/dags/components/DAGStatus.tsx |  18 +-
 .../components/dag-editor/DAGSpecReadOnly.tsx |  23 +-
 6 files changed, 614 insertions(+), 293 deletions(-)

diff --git a/api/v2/api.gen.go b/api/v2/api.gen.go
index 07cfa4d58..cc2dced85 100644
--- a/api/v2/api.gen.go
+++ b/api/v2/api.gen.go
@@ -1803,6 +1803,12 @@ type DownloadSubDAGRunLogParams struct {
 	RemoteNode *RemoteNode `form:"remoteNode,omitempty" json:"remoteNode,omitempty"`
 }
 
+// GetSubDAGRunSpecParams defines parameters for GetSubDAGRunSpec.
+type GetSubDAGRunSpecParams struct {
+	// RemoteNode name of the remote node
+	RemoteNode *RemoteNode `form:"remoteNode,omitempty" json:"remoteNode,omitempty"`
+}
+
 // ApproveSubDAGRunStepParams defines parameters for ApproveSubDAGRunStep.
 type ApproveSubDAGRunStepParams struct {
 	// RemoteNode name of the remote node
@@ -2483,6 +2489,9 @@ type ServerInterface interface {
 	// Download log for a specific sub DAG-run
 	// (GET /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/log/download)
 	DownloadSubDAGRunLog(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, params DownloadSubDAGRunLogParams)
+	// Get Sub-DAG Run Specification
+	// (GET /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec)
+	GetSubDAGRunSpec(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, params GetSubDAGRunSpecParams)
 	// Approve a waiting step in a sub DAG-run for HITL
 	// (POST /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/steps/{stepName}/approve)
 	ApproveSubDAGRunStep(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, stepName StepName, params ApproveSubDAGRunStepParams)
@@ -2813,6 +2822,12 @@ func (_ Unimplemented) DownloadSubDAGRunLog(w http.ResponseWriter, r *http.Reque
 	w.WriteHeader(http.StatusNotImplemented)
 }
 
+// Get Sub-DAG Run Specification
+// (GET /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec)
+func (_ Unimplemented) GetSubDAGRunSpec(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, params GetSubDAGRunSpecParams) {
+	w.WriteHeader(http.StatusNotImplemented)
+}
+
 // Approve a waiting step in a sub DAG-run for HITL
 // (POST /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/steps/{stepName}/approve)
 func (_ Unimplemented) ApproveSubDAGRunStep(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, stepName StepName, params ApproveSubDAGRunStepParams) {
@@ -4807,6 +4822,68 @@ func (siw *ServerInterfaceWrapper) DownloadSubDAGRunLog(w http.ResponseWriter, r
 	handler.ServeHTTP(w, r)
 }
 
+// GetSubDAGRunSpec operation middleware
+func (siw *ServerInterfaceWrapper) GetSubDAGRunSpec(w http.ResponseWriter, r *http.Request) {
+
+	var err error
+
+	// ------------- Path parameter "name" -------------
+	var name DAGName
+
+	err = runtime.BindStyledParameterWithOptions("simple", "name", chi.URLParam(r, "name"), &name, runtime.BindStyledParameterOptions{ParamLocation: runtime.ParamLocationPath, Explode: false, Required: true})
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "name", Err: err})
+		return
+	}
+
+	// ------------- Path parameter "dagRunId" -------------
+	var dagRunId DAGRunId
+
+	err = runtime.BindStyledParameterWithOptions("simple", "dagRunId", chi.URLParam(r, "dagRunId"), &dagRunId, runtime.BindStyledParameterOptions{ParamLocation: runtime.ParamLocationPath, Explode: false, Required: true})
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "dagRunId", Err: err})
+		return
+	}
+
+	// ------------- Path parameter "subDAGRunId" -------------
+	var subDAGRunId string
+
+	err = runtime.BindStyledParameterWithOptions("simple", "subDAGRunId", chi.URLParam(r, "subDAGRunId"), &subDAGRunId, runtime.BindStyledParameterOptions{ParamLocation: runtime.ParamLocationPath, Explode: false, Required: true})
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "subDAGRunId", Err: err})
+		return
+	}
+
+	ctx := r.Context()
+
+	ctx = context.WithValue(ctx, ApiTokenScopes, []string{})
+
+	ctx = context.WithValue(ctx, BasicAuthScopes, []string{})
+
+	r = r.WithContext(ctx)
+
+	// Parameter object where we will unmarshal all parameters from the context
+	var params GetSubDAGRunSpecParams
+
+	// ------------- Optional query parameter "remoteNode" -------------
+
+	err = runtime.BindQueryParameter("form", true, false, "remoteNode", r.URL.Query(), &params.RemoteNode)
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "remoteNode", Err: err})
+		return
+	}
+
+	handler := http.Handler(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		siw.Handler.GetSubDAGRunSpec(w, r, name, dagRunId, subDAGRunId, params)
+	}))
+
+	for i := len(siw.HandlerMiddlewares) - 1; i >= 0; i-- {
+		handler = siw.HandlerMiddlewares[i](handler)
+	}
+
+	handler.ServeHTTP(w, r)
+}
+
 // ApproveSubDAGRunStep operation middleware
 func (siw *ServerInterfaceWrapper) ApproveSubDAGRunStep(w http.ResponseWriter, r *http.Request) {
 
@@ -7048,6 +7125,9 @@ func HandlerWithOptions(si ServerInterface, options ChiServerOptions) http.Handl
 	r.Group(func(r chi.Router) {
 		r.Get(options.BaseURL+"/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/log/download", wrapper.DownloadSubDAGRunLog)
 	})
+	r.Group(func(r chi.Router) {
+		r.Get(options.BaseURL+"/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec", wrapper.GetSubDAGRunSpec)
+	})
 	r.Group(func(r chi.Router) {
 		r.Post(options.BaseURL+"/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/steps/{stepName}/approve", wrapper.ApproveSubDAGRunStep)
 	})
@@ -8658,6 +8738,50 @@ func (response DownloadSubDAGRunLogdefaultJSONResponse) VisitDownloadSubDAGRunLo
 	return json.NewEncoder(w).Encode(response.Body)
 }
 
+type GetSubDAGRunSpecRequestObject struct {
+	Name        DAGName  `json:"name"`
+	DagRunId    DAGRunId `json:"dagRunId"`
+	SubDAGRunId string   `json:"subDAGRunId"`
+	Params      GetSubDAGRunSpecParams
+}
+
+type GetSubDAGRunSpecResponseObject interface {
+	VisitGetSubDAGRunSpecResponse(w http.ResponseWriter) error
+}
+
+type GetSubDAGRunSpec200JSONResponse struct {
+	// Spec YAML specification of the sub-DAG
+	Spec string `json:"spec"`
+}
+
+func (response GetSubDAGRunSpec200JSONResponse) VisitGetSubDAGRunSpecResponse(w http.ResponseWriter) error {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(200)
+
+	return json.NewEncoder(w).Encode(response)
+}
+
+type GetSubDAGRunSpec404JSONResponse Error
+
+func (response GetSubDAGRunSpec404JSONResponse) VisitGetSubDAGRunSpecResponse(w http.ResponseWriter) error {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(404)
+
+	return json.NewEncoder(w).Encode(response)
+}
+
+type GetSubDAGRunSpecdefaultJSONResponse struct {
+	Body       Error
+	StatusCode int
+}
+
+func (response GetSubDAGRunSpecdefaultJSONResponse) VisitGetSubDAGRunSpecResponse(w http.ResponseWriter) error {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(response.StatusCode)
+
+	return json.NewEncoder(w).Encode(response.Body)
+}
+
 type ApproveSubDAGRunStepRequestObject struct {
 	Name        DAGName  `json:"name"`
 	DagRunId    DAGRunId `json:"dagRunId"`
@@ -10630,6 +10754,9 @@ type StrictServerInterface interface {
 	// Download log for a specific sub DAG-run
 	// (GET /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/log/download)
 	DownloadSubDAGRunLog(ctx context.Context, request DownloadSubDAGRunLogRequestObject) (DownloadSubDAGRunLogResponseObject, error)
+	// Get Sub-DAG Run Specification
+	// (GET /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec)
+	GetSubDAGRunSpec(ctx context.Context, request GetSubDAGRunSpecRequestObject) (GetSubDAGRunSpecResponseObject, error)
 	// Approve a waiting step in a sub DAG-run for HITL
 	// (POST /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/steps/{stepName}/approve)
 	ApproveSubDAGRunStep(ctx context.Context, request ApproveSubDAGRunStepRequestObject) (ApproveSubDAGRunStepResponseObject, error)
@@ -11740,6 +11867,35 @@ func (sh *strictHandler) DownloadSubDAGRunLog(w http.ResponseWriter, r *http.Req
 	}
 }
 
+// GetSubDAGRunSpec operation middleware
+func (sh *strictHandler) GetSubDAGRunSpec(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, params GetSubDAGRunSpecParams) {
+	var request GetSubDAGRunSpecRequestObject
+
+	request.Name = name
+	request.DagRunId = dagRunId
+	request.SubDAGRunId = subDAGRunId
+	request.Params = params
+
+	handler := func(ctx context.Context, w http.ResponseWriter, r *http.Request, request interface{}) (interface{}, error) {
+		return sh.ssi.GetSubDAGRunSpec(ctx, request.(GetSubDAGRunSpecRequestObject))
+	}
+	for _, middleware := range sh.middlewares {
+		handler = middleware(handler, "GetSubDAGRunSpec")
+	}
+
+	response, err := handler(r.Context(), w, r, request)
+
+	if err != nil {
+		sh.options.ResponseErrorHandlerFunc(w, r, err)
+	} else if validResponse, ok := response.(GetSubDAGRunSpecResponseObject); ok {
+		if err := validResponse.VisitGetSubDAGRunSpecResponse(w); err != nil {
+			sh.options.ResponseErrorHandlerFunc(w, r, err)
+		}
+	} else if response != nil {
+		sh.options.ResponseErrorHandlerFunc(w, r, fmt.Errorf("unexpected response type: %T", response))
+	}
+}
+
 // ApproveSubDAGRunStep operation middleware
 func (sh *strictHandler) ApproveSubDAGRunStep(w http.ResponseWriter, r *http.Request, name DAGName, dagRunId DAGRunId, subDAGRunId string, stepName StepName, params ApproveSubDAGRunStepParams) {
 	var request ApproveSubDAGRunStepRequestObject
@@ -13035,289 +13191,291 @@ func (sh *strictHandler) GetWorkers(w http.ResponseWriter, r *http.Request, para
 // Base64 encoded, gzipped, json marshaled Swagger object
 var swaggerSpec = []string{
 
-	"H4sIAAAAAAAC/+y9a1ccOZIw/Ff01u45xrPFrdvd082e+cAYX9jBNgt4fWYbv25VpqpKS5ZULSmBGh//",
-	"9+codEllpvJSUEDh5stMm1JKISkiFPf4Okj4bM4ZYUoO9r4O5ljgGVFEwL/2jw//QRaHqf7vlMhE0Lmi",
-	"nA32Bjmjf+QE0ZQwRceUCMTHSE0J2j8+RBdkMRgOqB43x2o6GA4YnpHB3uACJhsOBPkjp4Kkgz0lcjIc",
-	"yGRKZlivMqPsiLCJmg72docDtZjrz6QSlE0G374NBwf7b17TjLyH+apA6fX1Sg6Wg/03aEwzEgdm7OZp",
-	"g+ffBRkP9gb/tl0c07b5VW6HsFjY4nBVYIqDw24JSgjGSc5il3Z4EECxKXKGuEDPMqyIVM+Q4mhCFPw8",
-	"41IhQRLClBsaBzrFE7PWLQA3E4SQnxIskundwP9HTsQiuoEbA9zr0pvPsPPiI1SAFTmjM/Ja8Fl9Zamw",
-	"UCjFiig6I2jMhaYCRfTnDhSJKEOHpx/QLz/v7OohM6zQFVVTpL/5F2ek4cDGgs/08r0P7COj1xpWqfBs",
-	"XoL+jNdhJyy9K8gVvyXcbwmOENX7fDYy7C+jjEiNhoKoXDCkjwquf0QmlDG9B4sPIVOqQDnVi1Q4Ip3l",
-	"s5AfUqbIhAgA6ojOqKpD9Q5f668Qa4KuYfkMpiutb2Ya7O3u7OzsDLvg+TAeSxIB6Igy4qBRHBkcFQSn",
-	"+ljgpDZ2N0dYkvR5A2jczLzE2RzjSYQw53hCgnOhiszgXMZEJVO0kZIxzjOFqES7TaDoKUqA2I8AkC6g",
-	"iIjDVQVpTgQCWEOQftwZohm+Buh2dhrhs2tEQfxJX2J4qZ0gn5AZV+Q9TzvYnIBxiOmBccBEMVMUtkHG",
-	"E5wNYi//qcIql1Fup3LZwGkry5uxvVmAXdKsTubdfF4qMo8zeem+X47RnypBcITFf5oSNTWUZJmNVCnP",
-	"lX4QpUqJECjjE9l4DDBr/2OA4RqeM0yzG7FAzde7mZ/S0y9B4B8lEUtJp7kkIn5BuZnq5rLpNzc0kJzr",
-	"kFnxGFFmXi791+FgLvicCEUJfJsIghVJ9yNc9KX+iXIGb515mYYDMxMIM4ps6l/qBDR0s/590TArF3A6",
-	"6PAg9nXpg+r3x7mYc0lQ+NfIHDRyUx+rNxX78IIsjgUZ0+v696+pkAr9gpIpFjjRegtIDW6+BDcBk2Gp",
-	"Psr4KR9hqRDO1VRPkvQ8cJZnGR5lxOFNbUUWZR9v8xlmm/oh1B8jKwzWPhY8I50SiyTiRI/7Nhzk87QJ",
-	"h2B35vel0ehbSB+/6RsdevmVA1kXdzUMEDkEKETFz34FPvo/kigNuiGdEyLnnEnSTELCjajSD55TS3tt",
-	"p2UptLol+3EzYPKIStUMnf5VcxsLpWyADv4T3vm+cHqAsBC4CW4ZB3w+F/yS6DfshPyRExnBCvsDGvF0",
-	"ASSE4SMtnWF0hanS/2Xft/KGKJvnxniA05Tq6XB2XBrRzk0G/yCLzUuc5QQV1gf9hsD6KdlCZ1MiCbqi",
-	"WYZGBOFLTIHSEJaIsEsqOJtpTe8SC6r/DhqCzEdSb4kpgFpuDWoH863rqJru2P2C8FiRJU7KK5u1Gc+s",
-	"tULrtHEGLIjMZyRtEQWCKa6wRIJsEvZHTnKSwn2Sa5LkZW444jwjmOnpZaN8o0EzOyQpbKuBR1XwMVSs",
-	"Q9nH7CKKpXlK1SumROzZRJKyib5yPUjLNojAyBp1JfEnCnaRGE4+1QojBgFb8zySog2yNdkaIkmkpJx9",
-	"AeVkiBI+m2GWDvVylD2PPqpYkQmPQfzS/uIkDwM4udQIaZdTRMwow9kQHt4hSvHkefzt1XJRRPT9r9MP",
-	"7zcJS3hKUru7TTkniX74kPvqpg8xII2aUulPuj7PfD9NBZER0F5mVO/08BhhMwTRcUG5scmKpyiG4sxI",
-	"kXB8PElyodGsr+iTN4iJhT0JJJ+rKQ9wQnmMaZoy/qB/tL/ccOrYCxu+0h7jhgM/hZddPVSN9HXEJ7IH",
-	"Y0s4U5iCyaJMcZrMqjTn/t74Fsam6Pf2FSyh9v4NB4orHNFGzvSfAwXfrolmWCVTvSOrhGjWvTEiYy70",
-	"wzOhDAS9gAJDTSO8k2ITBoLYYb+cYjYhx1jKKy7S/q9uor/TQM7tp3XtQOM+U27qCOmZAX4GmPeSiFAc",
-	"blVlhgNGrprnf0+uirkVR8YoE8z4SxdSV7dQXrDhONU7ImXUcOIfh0Rz9pkZpmUAzNDR0TuNzJdEyAZl",
-	"izNFWMyCZudxAyLHNCMKp1h1KtAB9O/cJ4FMH19X/6o3obG1sgPCtEr820AupCIzS/eaIUhJpcIGWM5D",
-	"zGy4CSu0uz12HP27YL9VoM0vCI94rtzBaxk4wVkWOfTZPCP62zN+QZhsMykoGFGchPtyEJitduo0OxzM",
-	"eEoi7OGd/nP4zuUSnpLa7c4Fn83VsgCarzqBs7KtiDDNo3dO8hVog88Jw3SIMFNTwec0GaIJ0VMPEVHJ",
-	"VlReAK7UBLfhjhbmDQMt+o/gXJ93wP6tHUeWfF1CkjWqO47LzlMs33ERk0+FFlvGRjSlEkml9QSRG4M7",
-	"ZimaaQ7v15jhBcJC0EsSFYTduObXrARy35csZGCRp0wDXxg42yZ6z1Pi7JLhd0d4ZLC938dmeJUdBLsK",
-	"IKovM/TXEeUYRm5uFOWtXG2cNlRJhMUkn4EHuibOi0nkJvbdeCujEjdleBt1sqicufsmqis4GBW3ilO3",
-	"xuPmix8JM6pxxHgmSOJ+NbrJLNcSAUGa38sxJSmyUopHaoPsXATm7tqr1rTeq+u5MHoOAnmDJBewS62B",
-	"YxWVn4kQPMKpXuk/F+/t2D1Vdi9UIsY1pUTfTnI9J4mKKbSv7C9IK4uZcnJ0MbEFtUEyBzGvS1EuJtOK",
-	"YAnEgBcwMtEnUtcbxghsfIjqZ1nJypQW7g3QxLXqUvyUciLR+w9nRhh9Hlm1hlTuIuNoxUWqBVcuDpl+",
-	"+ZMItMEgRO0oZL0mbWboKY9JrG+5VKDeXE2J0LsOJpcOQ6PKol36sJfy6S+9Dnv0reYiAusxF8r7HKc1",
-	"YDMqFTFuWTaIPdJgB4gbUU9ev/zxxx9/LQyo7qaLFezXMXBlgy/rZflzw3ydtKfVvUvjOfH/mbMLxq9Y",
-	"t6AXnP7Q3Oww8Ib5fdqT7MA18xQs99AXbjqcZdF7lREu5ke1aZf6uScTfZmCpI1T93umIwTVZXktQRk9",
-	"OTB3O7N2gyZoBqHCuG3G1UyIy/thZvjaaWY/7ezc0jERTLZrPcdtiuRybovKwYaOhe5zbULG2sGuxGsA",
-	"jo6IOyrPMlhGkkQQNUScZQvrDCUp4lH2FfdAmBWa9w3H1t+uAI5DkB0YuXJ+0PIJzBtVfr3WMxnaJFrV",
-	"/Ru4q5rNaeZp8ANKKPjzi2FnxGB4tMEswV4aEexg/02MRwtjaE84G9NJLox/MGB1KRlTZt57UD+c1lyn",
-	"ZYh6OMYCzyL87cBGfXinCAInCWia/3X64b2LfaJjkLOs4ZekCPugN3vtcUGplZVUqD/4MYi00ChhWY7e",
-	"6IhM8SXlURfuRPA8Ytk94hOa4AzBzzZASpAMa/HvYP+NEfC5mGBG/4WNa8ktKePC3/U+vI0neUz5rUdF",
-	"JZxZa1QRX4azjF+R1AUvUGmDNusCQhxl3abqYZ91uaXh7t3bVty9nkwa/SDBTKsHGoMJaCgecutYrUHe",
-	"XykCh1HE2hFsBYb42bUghaWkEwawbKHDCjoOvWcKzoMqSbIxGpGEmw25CRs93zl7CZTWxU9O/EAbipHm",
-	"WYuD1o7QSEe8SiQt8bKJkef8ycopzzON4t1n3BpK48CKmbPxpAUT9K+GkxsHAP2XM2+UIiTlErcde24b",
-	"2OBBkwvK/GCotcIR23SLB2d9GY683md0BiZXCRo5+KCvMFVO/QYx2byhhd5dZwr3ylcJu2zGmbhz3Jjs",
-	"3aasW7iyq/4M454Y+xSzNCPiA+uisLd+oP4KQjWU1io5O8CLVjtuihcudA1ThvS3XMAmbChd/aozPjmg",
-	"EcvIARUkUVws0ByrKewVJmMT8IKNabYWz5df7lSR+bLrQVSFX4wygz+oiSpapbua19k8GFdUTSkDE6FB",
-	"s8fwgs4De15UxXe/lY19s4IkccHDMDNcp7/+6sxFT2/7Or3tMk5gHl6gpcLWrMmpP0q2x+6S+WMTNl7T",
-	"2N26ZK7CbdDDhpniSY+EHm/jbjkS8zsiLOE5M5amNBcunKAw1/RnFOPGPDZ9AKiU7OSCpiNhrIpIZfKQ",
-	"+qUuneazGTYBFTKXc8LSPlFlVKJidKfVOkit0zdQATNc2B98Cy7ED+l9PNHPRwQJMiHXoOgrRYT+4v//",
-	"DW/+a3/zf3c2f/2y+fk//j12ngf7b94Imh4qEom6179AcoYJqaAyx5khDcewfZCdFR/qAWru77XJT0t5",
-	"DNbBkwKijRbIhjb1ovmyi7CKdqzzNK3/td2UYlm6207D9fW6upXc2knOAiUFZ9mH8WDvt+UIolG5qXMa",
-	"L6cY1m0lFf9yb9XunfE05lQubp2ylF7SNMdZec5KVktfBIhdPWcvMUv6uYnN+FfXJrms3+jXmGa5IP0/",
-	"OM2TxIYP9vmgQ7TyIl84rFHKCtNIVylnVekE7r1OHp+HHcjGx4EgSFmS5ZAqJ/OR/6uZO055DYHGrQI3",
-	"YC4601itJTycGbW7SLG1cnNupWZBxkQQlpCmpFtNBuQaz+YZ5BbCLDck7g+5cmHmVYE6y4y/mJshRlAC",
-	"BurZsUQhdQ6D8yw4trPTgphbwg4TG6MZca4Q436hK/CA4rnKhZOF3U/mLnzMOpnN1aJkDUZjSrLUhKP4",
-	"AWbTss49+kaa2VMKo8x4cXA3jM8vTti8SnaLWKKLIHKfCrmF/kEWEmHhzsHqXBsfj49fnXx5uX/6yoay",
-	"KYNACZ6R7CWWRD9x1iY0hLCEXCo+M5lS40LfeA5HaG1B2BKxuwC3pjtE9ArO1N4EmIriN1fCUoidAI1k",
-	"8PV8cEEW54M9dD6ANc8H32wMe6aMkDrY1gr+tuLb5q9b6lq5uNCXWlAc7A1e/DD4Fss9KAfeeB+Bu6/P",
-	"jXTtHqzGyM8IB2nNReiX764lVkbltNEhjmIe8ZCQ3PdRQZZPIg5NrKYaT/QkznAyaPFg9iqR0GwzOMkZ",
-	"5J0HaSiFiSDcSNkM2WCWIEyFfHgZkQSOuzla3Uzur/bb58qC3VJXZYbIBkzmyE1v+gpLo/qn8WQ2fldH",
-	"o6cuH0yxWPexlL6Ox220BIR0nkqviJA+CclufK+gv1LA34o0fyRyJpfSdq+4uOjKwjBjjMRmLSGpt3jA",
-	"CW48gwTxZwAi/GfxgD8fdEc7l1ChgojDMGfJqjdhiEwQ/RgGzARM0XCxGON+FY+ge0MYETQxxgUfmmCf",
-	"rEg4TNrJ5WChl1Zebkwc2veCgF26lixUgD5rCrs/nXKh7PduUHeMJGT+u+GNR/UyWmvABBzqOUBbSkxE",
-	"g8YcPYu30gQxU2MuRjRNiabmEU6/FHYaxtWXMc9NzCjT4ijOvrjPc4ZzNdXYD9Sqv5xgRa7wAt7/GVfk",
-	"ixa+/QczfP1F5OyLIDgxD5yev4iGw5kgOF18IddUQpirnn+rsgz8DSKzv1B2iTPq/xhuQ/MXnqtIyNdw",
-	"8Db0ktTszoFvDhICIZnKOlbKAnId9Xrpjc7YSHpojW7suJ/O6IbLfhqjGR4LVX9LcKamPWLXrNzo1KMp",
-	"fGfjZQlL55yyOok2BfZ9uCQCZ5mbpVyzQhJxSUKsNaMWgIjuvz8vlzLnRUGYGzVmxs3hlzptm8/Mz4FL",
-	"NOrauSRCRp2dDgg7oLbfdl7hea+b34Mb7jzGQvRjdoYny11yRqVxg2YZvIL1NLd7txC3P9W2yIWF9YZ2",
-	"ePt1ixH2SL+yB8aOfhPjurPK3czGfjWlGSTVaKp3Z2ke/mUdc92Gz3DeXtbP1mObRL3iUSNimJvdMz1N",
-	"T9WSmtaYLhMY9gUBHRrSY0zhlkiCbhAOT+UrqegsGhIf+gv0XAiuEByIDBH3WWxWPdqqyl11ZVwcZZQL",
-	"gc59pMd1p4Sa6axxta5YNiV+tqXJHfEJZf3jMSErGPLKVxWGubt0lvIzWQqrvGUcZcuhLJduXC67osWh",
-	"Oiu+nlNBZEwPg7w3BANuWinHrFnPtv901gRd9OD7xL/W+bGdsdihnSx2vO+IEjQ5Bkmkxp1bhIOPjF7H",
-	"z4Uy9fOL+COPMxM8UJwhz0ucwpBXfUfBOmaS2FbixcUK7whmVQdJzecSieieC36Js8PVFSgxtU5cfqZ/",
-	"4N8enh0ht1xMiXIFNJZIJdGsCeY1m8XSV+GIIZz7LVbeKaxIcDXlRTWP0hLRODnegzdbkXycZ0EWqTEi",
-	"CDK3YecmACKGWMskl8FRjMFNEgO3wz7ZdMpm1hbbpCD/B/bvW92em6RtgT6358Z2354ZSTk7IVjG5PMP",
-	"c2sEEDDAXpn9KD6jEotOhIBRCCtFZnMl0QynpCgmUgb2VslW/u5ubVerJtXePKFWf50SIdpt2VJhlmKR",
-	"WuuJk0CaTincTqp1/36TW3/IMrOTeX9FfBQPUvQxTYWjEqLIeEIhjMmUag3A6BfHlI9s9EgsusrAcgLc",
-	"JhbN4mASdkQZOECmHLQLM+CYZzRZrAC0mkYLG7aX6FGlxZ7YYH8M6DBk0k0Pa1PpzPf5DMyP1hxRNay5",
-	"SE+m/67HkL1ztrOHzgfvuXJEdz44Z7v6byfG2KX//YP+92tg0/qfP+p/7o+4G/5C/9u6/vW/f4J/X9D5",
-	"3Pz+s/73MRaK4gwF4/6q//7JFtgqSpThTP/4C8BgeaP+Q2FP2RnuDn8Y/jh8Mfxp+PPwr8NfPtf4z3Bw",
-	"valHb15iYLZSX9d7rk49ZznxtrzX7v2xWxoM3Wb0f5ltDIZuA8VPFnI9l3sKPpcuyHOc1pBxe1lh5LhT",
-	"I23hVWdGYlx9KVhjYYz0Dyj2G4A3nJiALOm3MDdbyBZfwt+v/D78kxYzTlVd0ZE8b+d5B73qWgW+cbsh",
-	"5wutSXbmbYl5E/bNT2GEQxBI0+DX8R7+JV4fEoBvv+6tYaR48n45l+VN3LVNbk4oGyaJoDij/yJpq7vz",
-	"tr6qeJ0Jt/+Sy6W41IDvhTcTY2/HvnBTXQPyZYZi3ovEV0ny1aDjcevkumEG/Uvn53NBLhvKUAtySXku",
-	"O6cAw8ZxvCaJqhg25rZ6R8MsJyThIu0xj7ADO00ipWmHpSMvQR4cZHAosRv973iU+r7xJ29bU6BJCDDC",
-	"hDTxEMAZqVQ0qTOMGb5+6VIXksWSmQ5hVsUWes0FejbJ+AhnzwxMcmjkGeoLQYCnhaSovKz9NsUTU+g8",
-	"/rnJ/yllghQVwHdL1Xl2+yda1IP8N8weggh9W1DExvJDvIz5sYi/aY4U6NQKbCnKQuqyD3mpwkp70ST3",
-	"hDWX5jE3li18qRS/3MaI5yw1wbTla3neV9CrxU9X5VC7aOdRNIPZeQTmLzWjl3V/muvaLPCTjhG5nmc0",
-	"oXo1yH8g6bCEg3RsZV939YEEYaYxbNqM7640EeZ6VI6kjCvFfTaygUN9Lc32Q8v8SWo3burmN2b4+0uO",
-	"I4+P0oALXqJKYSdezEuPVNtUwXNWq+ABoJQmazy3ZUs8ZpYNSKedESqQKTISomb5OM0X7XU56rOGhbkq",
-	"LKHveZsXIqoH+sC4zu+lv6/KOdttFbM1n3JjIN5p7UVCOBFcyuBQaudpggbxHCdUxecsnWqFi9moyG4G",
-	"olf5bxOa1eAnqbFoygqY+87ewwtjEWyZqU+aXoAK5AWH9fmtnQvkimY2GfWYiIQwFQ97gaKLm1c0JSj4",
-	"BG2EAKJtVLpO9BfXrsMrCOOMQ+hg2IojCmKTXT046srplG95WMGspp3G8NxoqssVDrcWxO5y2GJ5s6R1",
-	"ADdmqLRuoGc5797w36acd3u9bW/jvV297fiNzglW76LuFvNbGBLPrenWme+dYABueYhPUTRSZjRqTvlk",
-	"v/lovvGwWGtbj4glOA1joguT4su3MsLJBR+P9X9yRmxcaayeNFRwyyWRLvIczfJM0Xlm64/9sLUTc1jX",
-	"g1wgVJ1cm2eG4gxZEIL5YoRfIe/PYIcIyvb1zj8h11TFA+Z8YMU1VWDes+kwStDJhIjIWVbDKWqiZ/Ha",
-	"QtTcZbQCc2MdBXVFCHPLOg9BPLW+b18rMMuYbBSYtc4fyhnvhxbsU5I0T+/2Fu5iI8FzWbrnieBXavo8",
-	"upKBpjOvuaDGBvYliVq+ijROZ5QVRZoFMTWaKxlpSxZ59lY5WzxqmYrPXfWdT4jkuUjI2yI7smLLmee9",
-	"O2aEbvEI3qZUXqxqroyblnCrmGtGZnbrt58tikthsn0Xq9XageAZpNBDrApQhKk4bz0mvhxKEA9eeSCp",
-	"xKOMQJWXV6kjZ9vqa4wzSWpJcOaLoGoDSc0LXF6yZp0MAorsqvAaLreqzToyr7azelRbCDXlPNc2G4Hk",
-	"c/xatNB2hg1WVmLjg2AxW1obKSwvAgF3RIo0NpLGhJT7MTUTpg5u+eWSgEL0/g2WLL5bcsGbuajhvhpd",
-	"1M1iXGEkL9aNIdBpYzkM90ulMNO4KBwcVkmqhVjZuhmxkoqcBYU1oOmcW8rldnZtNJi/bVMtdW39kNVX",
-	"tZXF1KuvaStrcC+fahTDtWLeG1SePQ0/1me4YbXzv6Epz1KJMp5cgNGmqK3y/J6L07biye1r0tbvpf6i",
-	"+TH969HGp12qokz/WrQBfNHTgsbKB/tv5Duskmm8yoUN2DbpoxK+MOWqSxF3QZXL2illlMUaW7j+KzY+",
-	"uDF2Wf9ujOXtbWQNrVrQsEQunachtugoChV4+A1ITu4h16rb8QV7LMEaLtN8+CeQJxw/+cMgwtGcuy0l",
-	"7muOYCv13LTKjSmOLlsvPThWYjOlfaJUL6yNINmNwvF9w54lIvJNuRm3zeg13C4YJsjlvNN4GGO8e+zh",
-	"MN4E2TcaZkWRMEVI8C2DYXwS861iYU5tYF0juYOMGNQNBiuNbRgmNRt2Xd002bvymq35elkWNy1WitKG",
-	"RccwrFRExjVEyswwS9vao9gR4cy2EyOcX/8SK0EXkZgaT+akFRBvOw1rwLh4kqIKjA1EjNeA6UwqukWx",
-	"z6tpYK2CzhDRUKFYfclPXFxApWlfZzLo8BjYyJ/JoDNKpAWHHs9Fk1Xglf09oj6E8Zu1hCU7WTzY3jTH",
-	"jS9UNC8srRgLqG/3g7uduU6LzzSdPhuiZ1Ol5vr/U55cEKH/y57Ps+f9/Amx1oneXyEhIzpSW0ef1BZ6",
-	"GVTPocxXZC3K6EiU0QuC/v0rTbdMkOg3TUUYeKZBk+Kwt9A7W9TIJgKW60WV6qbEa43S7ANrSEwP+otL",
-	"wlJE9GjEeNFTWSLOinj8XMSTu5at+hkmdpT5eA1+ExtYn/x/3LECp9MbUK7ckyUJ+2VDMdEsiz09dQuZ",
-	"Gxu4S8r103oFH+xrRlL0/Dddb+G6wYBrlvCog41HOUHYfKYFwqAIE0e4wKrQv8/MB4Nh4BLpzeNqIz4b",
-	"Q7p3Pvcy09ePS24hV+eZSrS7U6vm3BHqFCPPppDH43JjYSylj5YP6mn1KOty6+KuHstXW9tVVFxp3U4H",
-	"OxbqqeodxGwC+r+dplbKwbEPOwgMZlRTaZ6mdAiocemrI5tSTFYnD1IjlsmB6Jyxme5tTYVWl1BB5pAT",
-	"X+JYhZcIiodJomxMn50YKXxBJBSmIynQKr8simtuZuSSZH5s6X3d6u7G16us6qkSBM9Mt1bbPLKShfA5",
-	"cFF6N25dkvXJDs09IG0Xv5IgefviUz1Iuxy9vAxlN1lho0fpjsDozC018aup3rgCk6tBp+jMhUR5s9fD",
-	"VesKYWzLirvTC7lxraVwkTWot9QWpdFRWiiOeyALNps5XUUhm5TZHAzZXNbHftm3pE9bLZ8zw9K8kNmv",
-	"0JcZrgWPZiJYYckwF6hjKsNzpijLiQy0KcogomMiwAr27fMS3KJW5dOeSLXiEwRIekAETi7MwqEfo3a6",
-	"Hxm9Puub5V0u4uLLHe7+/Ncffvpxd/fXX3tlgX+cp92tzMyg27Uye0+uVtPGTE90T73L6hcEB7Fco65c",
-	"f2OCz6JNuqi03uq0VWuzrueiAz1OEht1XdfSVtet673tLQa618aspKA+X753V/1EZcwp8NEEKDQ7/XCu",
-	"pseNHZf3y0UdiubLo5xmioJ/k9M0Cf1d9ietUdE0iRr9bN3+2AO2by7De19vUKSCpq290gLlOvp1Hyyq",
-	"oI7W0lL31UrQCMgjekBHWCpDCuQGZ7NM2ZMOz2Q6GIbVTly/dH+14S4+NyDsck7JvAuZb1xbpLGOiL+U",
-	"OGVBJ/pUS3Qza08wEsJc/8G01tgyIWd7aJxnmfu9EHBhTzPM8ITMCFND+99iD968lycfD0D49SrW0Nq5",
-	"uR0RmFhYthiiS0qu9NeC4HRT/yn0RGtAgNXAEppC7VyD4cB8GCVXvVV5BA2DlrmuzFXj0p9H70r2Duky",
-	"t9bh4jVTxq7xExlNOb8w7SF77MJ0rHWNIUEcmWjx0b0/V2Y+tGEukkhzu1Ci5nkkfSFaNQc6YrqZYAza",
-	"gKaYcsqvGHTEHFoTnSRJLki2+P+iaWZ2jq4ztIfgq45VTs/N4qr8tJxjY88z+3vFLG5LaKINs0nGlSUA",
-	"kzZXsZI3vw2fnCbjDu0K+x4wvTmgHd9UTwQdHkAtEddaJliuI125vQcHmC38ZZsgYxlvW9bj8XETUYl8",
-	"TEmkKtlSVe6LXfqDzHMar0iNpfool7gk/YHb9RJ3BfhyLMiYXseMWkIq9AtKpljgBJRqe94GzfS+3DaT",
-	"xn53LS9t805mPHVm2D4bib2cRQhbuMni+pd5SS3VtXPoMAbHbqjOlP0Pfflylad0cGg/f8s2+isEFXJq",
-	"rj26UvXY+7RoSmZzriDF7IIswL7py1/pR9u3fQsquxweIFvxFpmKt8NzBnUOLey2kp9EL3Z+RS85G2c0",
-	"Ub69mJt+aJsVf/x4eKCZgH2cSLp17oueL1wEdn9v474YUSWwWBgLlJ2j6hfQm8ISfXr197cfPvzjy/H+",
-	"P48+7B8MYoX8m++48wmGVhXL3HA3H/YMqKl8w/K2xO4Y1RZMP+OTSUY68V0fO4z0x2GZhIm0qcensm4l",
-	"2IzRkk2oDtceuqaIbrdEdHNQqrxfwHZK9eGPoJq5KXFeT1rK5eKYZ/HAwiJxfG6GxNIbIYQknkpjSgif",
-	"9rJ4mn29Db9Y/o11e4w8qSOSraYSHzQcgVqeMGfYpzAKRHF1+nF7S7BQI4JVv/haVx9WP4tT9yn0uqGX",
-	"pc58zVsXRZh/a/l9eSEbg/uhEVhpmV7PV5hhEKsyDFU6mpCvmrTrUbCocuEdVtXdN3mpQDawuFBZf1gi",
-	"hcqx1e+ugtzNlPq2QgOVQJ1YWW7bjQDKHiDOKhfPkkW0YvcVFjayrL12twGrr8IZqVNd5yrrULLaQdK4",
-	"ZBzsfmKYQa9O8cvP2lie+dtwAMomVYtTPbmrF0rPnBI7IlgQ8drJvXyO/8ghFQOG60cDBhS4PlUK6uKN",
-	"sKTJfq6mLlzcjNZ/rQ7+BhkEY+7qPOMEmJGxXA3+yRVGb/EMp1gjk8jsd3Jve3tC1TQfbSV8tr3gSuHp",
-	"LK3zyv3jw1oqF3Sg4ozaZsQHeJLbcuxbEMycEIuHFog3x0ebP0IebCMAKZ7km1xM4D+2Rxkfbc8wZdtH",
-	"hy9fvT99tWVAU1RBvyS9YlDSfW/ww9bO1g7E88wJw3M62Bv8CH+CNmFTuJhtPKebF8S0b56QqBRh5Ekt",
-	"91u/g9xCJwYrpM2HFDwjW94eRDnIQICYxqEhTXMnoDhY6oednUoNbjyfZ1bP2v4/m7xu0LMLee0SJXoH",
-	"DIiTiduEPpkXO7srA8P61uoLv+cqrG5MUrPyj3e/cuSWDDLblL27Xt/9ENQPMdcQItPAVeP/beCRETSQ",
-	"aDoRGL2M78tULAe7pSk4TktO2TIuGtOdQZWB4WpEqr/zdLGyYwiXcEL5tzIL1UrTtxop7N4RCM208NIa",
-	"vQARd+4eEQ5N0xX/7v1pSe/Fzq/3sGuts5atBA9O9gbjHNHHaf7bsHiPtr9ekMVh+s1wgIyoqAx3yS8I",
-	"9EGw8/Z8mA5gQs8MiiqNjXadYoh9brTy/rlGyS8iDknrqzebSP/MqP/ifnZtUqoeGuENjrUj/LBd5HKo",
-	"M1qgw4OeqP2GqDvA61ULa21vU0Ew3ib8RDB/AoJ5Q1QXtcyxSqZNUVEFvWjNrye5hFFXt6WY1UuUsZiw",
-	"XhLlfdKrATL1d/ckU373fOJPK8WW4y9bpNjcVsdpN6noUdBEgjAlKJFFXraaEtsWFiWCKiIo3kL7cO1a",
-	"322wtej5jrhpsLcUJzuBxpvvTXPTSPaHhmO0sADb/rULlwJoopdwBiXfxBClGOpXUP3tHzkRC9f0dW/g",
-	"PnXmPhyxfLYBkJsIi4bZ9a8mAHzpud0FmDqFPsEEbRyefkC//Lyza8PpmzYGseVnxntfrN7Pud8BUphO",
-	"uxRMhKUrgqiec+aAg+JwGpuDQtqmGmcMIlN5LoTHU7MJGw4Kdu50pag1+/IC4OQFnaMNk1Toivs2QcfH",
-	"Y1PMLQLeTkeu0J2KzI6s+1g3azzlT/AuvnY9fNEmEg9s8vzIyPXcVBgljdbP2h0FDwm8HO4VUdPtZIrZ",
-	"hGyGrQvjltH9LONXptB96RoM01QcmZlssWh+xcJuhxVjKYw8Ln6+E3NpaZEHEm+rWT+RG3UQ2vNLg65s",
-	"2YNJu+7tvSL4wt/j84ejdcQFuhI8qObikWuNqM+gnAcxrzX9LKhQTUMiNO1Em0kvOApp00tMzJbP2MAs",
-	"9QsNfZAWRv/16czGG3LmMKsu3NlupndBhqXuqvdMfeUmpjFbUDl/pKC8e8N0R3eJIKmpsyLXAKOth32w",
-	"99vnEL9DPLQJJixFfKQwZQWmteC5iYBrVVpoLQwLOrP4uJr62xOzUdr+5R/Nz3eGYKUckZgfLOAEpcyQ",
-	"BxWa1oVdviHK88rotUbQKMUT03GiBY8EJZfAJ7MgprhojaD5JndBskYJ1irxaIE8J/UZvnUl2MRWLq8C",
-	"+5C8zpEHWBGtWL0WfLbM+DPea7SNDTW13vp80Ud596drT7FBBbI/La8/h/NDugKeSLQBFYA2JdHAKpI+",
-	"30KOi8BYCO472H9jS3pM8SVB+0dHRZkSmGarAVbbX78Z1tvqZLEY8O4mN6WWLDbsDWKDXLe+1bS+iQYO",
-	"RwOy6o9q2FfYB0zcJ99xqfTlVO2mQJGgiY1jOJ7LNAeKGIezLCq52ZJe2cLgHS5i7TXClkpSo41/7r87",
-	"eu5YjVCyyJPbOmfn7GxKZRFyn3IiIbze3gjMTTbBZumqeI9pRv7TllHQB0pS9Lte83dEtQQqpI35B2lD",
-	"E8s5k3RGMyyyhVbeftecVW67n38fwmjbeFHP4SNZ6WxGUooVyRaIjs2EW1ClsMwsTWkwYvBM87LTOUlu",
-	"ZTm8hRfkPvItDg+qRQz/Ux8Qn1GlipQIzkgpI8KkQ8RzXv3UriBW7nL/4KLnJIHZNRLGc2JvUlZpiTof",
-	"lE0yolwRgLY67Ydj27VjLsilfu99PXg6tnkojq0hqTdrOtlJb6B3zac2gvyT59GsMn0skcouNRqkDGkq",
-	"7FtYBqaNs7/VKjS3LR/Tv8RFxAPk6opbbuHKsNy3FcLdFrLV2iy/uC/X0P4SCAnH5AgBGKXNPVm7B8+G",
-	"SBXp2iR4vODNogyqKUvDqCOPYSiBbxP2h2v4ebdPpF1IIqrCapnr+1bOiZBUqiKlxTY5bHstzR6fXkvz",
-	"WgaP5RXNMjQi6/ZimisumES5I2KP1/OPeLfcD5dECJqSAG/sNnyyTktpzafH7+aPX9FFtLC/O97z9ARG",
-	"nkCL8iOy4Cwt9z1ev9fPMtjbPXlf9RF8e2jb098XNjX/MVugbGeeO7ZXPdlovi8bjTnYoKq+e8V7Ee72",
-	"V/cgNNPwa2K6Z6SuFGi9M5FPD/dQWPC20EdJ0LNMS73qGcLGW+7WtMEswCFMlwwubUZq0ZzCF6f1NkrX",
-	"3Dsaix2WM711WFY3JS5LtHdDgEF5n27qaSonVJ7qVjRzLwGSZjeg2tx/PHUvYnWvX410+LjU72JpWt1O",
-	"iReWozR7QKpve1DyeYqh/l3hQfSNQapJO4EG9ohI6QlJl0HSAlXKCtuN8DLjk853BIrneGzM+KToBmXX",
-	"bWDqR3yyjljYPfYM06zPuLcE95rvg4mb7DHyCOI/7zRYUt/K2r0NRxqraEYexesAlQjLFHHrByLjk+2U",
-	"XzFXUir+StgBliaZoqJGmvoQ2+nTzbLWRNpNAYpcq+15hmkFAap2oGZcK9oATglObeWQl+aPmwdUzrmk",
-	"8QrR+0rhZDrTYq+eqTMo4NsTHQUPmMW/O6Ej02dD9nrU7NgtvfkCI1zfmiwz/TXsKJTwLDORQEGZmpq0",
-	"VgRwBCuY7mZgTbXFdEyfwwuykAjbxixmrG0atpFwdkmEcgWePh4fvzr58nL/9BXEKeMZyV5iSdBogezl",
-	"DhEXrok0pPgFLZieO2dATor1TJMS4lqTIIOsskVJ+2DP9jtU0rq1MLf5CNafhuZWpx+nHr1KGFFgkcMN",
-	"sAc4uwrUIQwRy/WMS9EoV8WdMe6+D0JlGSKzuVr4mQ2ubd2n7AwwP4Y3vH4P1qF3G+YjiAz6Ycddikc4",
-	"Z8kUYTQWRE7LplyMplQqDrvwbPFqSqFPWy4h2EBJU7E4DWzqdZo98ZCsuTa4Ivfe+3ZfmrNAQesj8E05",
-	"KxUjV0jkbKurWOWt3YavrvWGqHId/kMAmt2H1eKjtgNIzdLz0F4r36w02mjURP1fBeWVoWQrlk6FpUwq",
-	"glPTOdOF1RRRWlvd9TKDuqAWkj4GsRLndhTjzt5xgodKYKn6zO6Bg7917KfGxu/FZeeq8aINSyTl5GZk",
-	"CsoZO1iyQJMcixSNMp5cBOGHz9fx1XG45fm99QJY9mMydm/y4Cix6BO+EuBzUVQSAksuKc+D04u8JEos",
-	"/hyPyB01eIJDt56ThQn90IpF+5NVqnU9NCXcin7BLqLECJvp1m2ayvUOgXiU/jdA37qadiNqc6EpnYol",
-	"BKaUw1WCRgVBq20sJU8oBCsWBcw77aq3Dqx6FJ6yeCDQmT1ECCxZXQzQmrkgAFm5MHLrI9Cm6uFZVRPk",
-	"DahNkbnc/upY5bdtPNf8sEW12jcDoDGs5pLOcUYZsh3/rT9v6CNYsoVlsqbl3TwPxS4zgeO1+BLTDAq5",
-	"Y4kIu6SCM7AAuq7HsJDMR7bhPMBQj4KxQFpKtt2aH5+L5NS9YHdV2cmek14nyL2900JO4YrNGZH6d2Rx",
-	"8YFS3QEEKm2fnwpym2ZKhusZlJYIWmUZpfa+WRhQ4hrzMHvrCKMrf4xkDvzr7eHZ0WpYV183q3euMkRZ",
-	"Si9pmuPMt3nu4XLVmPFo3a4FT3kELto+24G210/O3LUWXYp4Bh8LF6O31TCBG7p4y47dJXlD2d37p2EQ",
-	"/anvyZH82B3J90fDtuF4P//y0dE7lGgVwn5lvTsLCyv8pKcuPITGfwfB0TCIcbbph7W5ZjVlvHOwfQ8K",
-	"xR29ly+nWLlzai17ElybDHy6dXH/SZqO+1dLB2iJ02i7KyBDQcB002gJOIHfb2wIwEgQLK0Vw6wVN43r",
-	"X540+a4WYHBM96jIhwt26PHmctdSj39iLzH2AtFTd6qrS9+nraGYuqmRZ574MD+gLHtcUTVtlctNpeSC",
-	"e5y6rLk/Kw+pmP97tYzU+3ZZgVVrf1NbvlU7vB6ulvv95UM8At7wDrMc3nHTytm+/c8C33aRmHoTNsHn",
-	"zfLGay4SYqNIFJ9rwcNV1/CBfLYoSdGv07TILTOFM1MpXH23STzrhTP+uOsXdjMsyUebS9T3U3TmC7DU",
-	"czRBaM4yJPORa3Mt0Ybp668/E2RuUMojuHweeYm2ELRZn2NBmDrNR+4mocyHDzBwQaR6B7AQOKy15unn",
-	"KsAw9cJneaboZkYuSYYYgWIhB/tv5POomuoXXtcXriFy0BxbafOHB+5IO06PyvjpBdFuEAvHuXK/Qf6t",
-	"6WrbcLxNxf5q93uPlf9kPnJZ5b2ywj2UJnm1My/czf8ofPdozUOg3xBVZikm8sSwImgJe1vOt/1VFmi4",
-	"4jx1C3mTF6yCWY+D2RTRYsHuSrn2ttOX5guO/OdYTYPuGiW6L0u3910B9E+Z3H4a3NyjzXAvE9cqmcBt",
-	"PeA9qf4p4/gW7uxlmVJwXevFlJ4c5vftML9TvnEHTvMWduLmegQ8pSfBuuN7SIJ98rF/jz72uyP7Owz+",
-	"LSzzAfxrEBHsGc4auxL7cJwgh954SPRlcBcxu1rG8xSn/BSnvCqt7fHGKleZ2S0doktw5VXFNffV7x51",
-	"9OIjClleJ21wXULHnjTHOw21vk9h8o4jsZdSL9ebpd1ExYSDeHBW8BQh/sR6ekaI3yfruZMA8to2bhVR",
-	"XmJNax5U3oM/fZ/SyKMMZH9k6lZnMPv9s49VBb4vYwRbKhr+O7di2fP/3oxYTyH66x2i/+gYZyxM/+HM",
-	"VKsO6W9T8ExYf4kNrnVkf08NzwZVe15oT+nhrT1PuQZPuQbrm2uwnITYJ2a8XEGsX0Mu2wg82o5reb50",
-	"jCe92MwxEX2H9mzQfpfN2WFuhSfNvdSXnZlk0DBJcqHQaLF3zjbR73q23/fQqf4bzuZTPCKKJoBKti88",
-	"XNpGgiXZpEwSJqmil+S5+Zpcq5OcuQn0YZBrFRQuBWZNZ2TL7Ahwg2CRUSLMUDdAIjyfEyzQmAoJkg2W",
-	"CWEg73OREhHMwPNiCf9dhqUyXUBjp6X3XDouT77ujgjLZ5oI7D/tzgIO2nyysHcAEm2EUCM9zPzreQNc",
-	"8FUDYFgmAVzmX3rGGEwrD5tt78hWJ/hVNGZ7TTNSD70fDoDztQBkfkeEJTxniohyRXz3aARw1AorV1ec",
-	"4wll2Nk/28A+LkZGIoY1L7PQlyb9HvvJFcEnlokHz0q/rv+MXFnzoGspHHTL9M3bLIGW3w4zyXtyZXLY",
-	"1qDFr2um24HzVkRuKC5ZqhceqTCp2TnQIc7ov4gr6Fkp1erb9LowId+EGY3ImAtiUgEpZ91lW2FXN5Mq",
-	"d1dwmOXTeQ8F1Meuanm28DmNBgtuvJV1lH0dBqxvE3RX0zl4HOpcwAmW29I0H22SL4+J0Ciu2cI4z7JN",
-	"BXIFfINwIriUroll+BbV+IJpcXojqbJVBNx3sMB7bluVNLzxf9xrrHlVTDdTuTYvY63LAOQ2sxTOpURr",
-	"Ta/tq9ZX1l7nMo+sIDLPVGQlc2nI/o5mWBlwbftuONt+aX0w0QnMc6jIrDOvz4HkX+3v6KG2pxp/nD1Z",
-	"qn5Kn6a9nNE/cgK6HMqhwb+hyy6afEPUfpYd7L85MwLSLR/ru4quoVKd4UmbNfhRS2hOB29CBCckNLt2",
-	"/seOkKamSKzIuNPWbGt/k1u+QImxbm6ds3Pm/MJFe2+7sv7eUKHNbvZyTIKZFmPmWGjBJ1vo/5IkHZ4z",
-	"I+9bljfDC4QzqSWkJMtTYodZ/DT5i6OcZsqqpXqtTcUzIjBTKONYK25GpSwjsNv4wf6bW1c+X7m82SBA",
-	"ghavuCZUdFU6TT6j4J9zbZ+rbDsumdYLbK+u9nkv++TNVdseUrlPAu1WPmvYutQbCF9HisqLnCA6Li6J",
-	"SrMQ2mDcrvO8uweNmX2px+x/iu2Yx3D9+JkjP8t2SljYwtC+aoUS3C/mvDOiSFTunGFmuhoLMrMJHJUu",
-	"CbZkCkFyIbVYUe97rCe/rSray2/y2m4q9hi+aCDbsMeQOYf0XusRrHUvY30c0Lnu2j5YVpesGjP6VRDo",
-	"anFf1pVitTTvrW5AGyatWgWZEAVn655h12WzpoysnF2v3laYaRHIFl1cssTAcJDxBGcHreZWGGKM3xA9",
-	"g4URfXxJF3NuvRSiI7tcbB8yl3PC0ljLtE9BozSNtFSiYnTnK1Q6oHCdcPvfo8YV9HaczQWZEiap7U0S",
-	"8IVeT9Z2ZxEnx3pcRKYx1JviP9FSXz1YD1yZacG2eEwMKFYEpIXCXI9LQ2YtR7aEL6NM5lVamwiaHmAV",
-	"4ZZvBE1RihUGPnlJZY4z+i+HKH1X17P0Mni4swlA+h4JsPCCB+SB4097G/UF8T49jCQt5YNAd03yDIsl",
-	"6/GFlPkAosHDdd8yB7+KGj7fE4a/Iaqhck4gZNbDPJrwnDDoVdqngWOpT3CskxxLEU5TiSh4qaztNjeJ",
-	"Ss3dHV8ZCDyO3/uz81D9f61txnXhtX1oLeO582bAHrCgEbAPwqZjUNmcR9F6ejgj3qPo+wGbbpJwwJEH",
-	"9zioW8DRHEvpUMNhE2WmK32TEck2042crD9HO5upU2hQruyQqhm4KJtkRLlcJ0veY5xJUnPGjRH4b6BP",
-	"KWEKGYKBygxjJxq7HrGuficX7jY3XFnGFzu/osT2lm2w49y/XWzJDsvLNfTs7VL99X5sEO335FECzXhK",
-	"1rCBr2WTVT7cW6ARxNmLG/h8EH8MgRilBrJtqsMJzPwQtq+VWNHJlZ+1Hm9ArmyCoebcAZvsjjUIpn2K",
-	"yf2eDYiGcIoApmof7SaCvGUrX9xPo7+fRr13qMjfiTGQFt6wpSx/d9QQ+Ls2hfXw2AwH8zxCBO94Ssf0",
-	"dlTgW1w8CCGsJDOkEedc9NWKG1HfpdB5p/RZ2eL3R1MGmYvAwH7vjMJCrUq/h8m0hh/mmZTzPwIKq6n6",
-	"8MmjFRVXoOQ7k9+Tlr9KnRywsl0lf1LE11kRX3/124U8M9fr5OaaOGDrplywZAVceRhlyUNIezZ1Iow1",
-	"Vh8IBDpsaC5AZ4Tn6vkQ9uMoAzT/PMsCzu689UXHF8ZTl59sw/n+8pfD2ZwLhZlCIzLFl5QLufeXv5yz",
-	"TXRoDAh2PX3z5DohxCcpuF4V+oIpy4nfAhQ+hSEjnFxMhFb9tpAWel7s/FIE/Nk4PwP7744OfkeSoySj",
-	"+vohdHDGGVVcIC70PxOSGdd/zrYCIAEWgkHtwuiZzRt/5mzsG9N8htkmZZtqSjYzzl1lS5whBlt6PrRl",
-	"utI5p0z5c6WzGUkpViRbmKfyh50dkxOpH4RcCMvCVC5jsYfFo3mqUebp4Xx6ONfy4RwOLJlHFDl8TWf5",
-	"DEmScJbCHjV5wcHqZQuGU+JU7o3Tq83MFIO9X35+sbMzHMwoM//e9ZBQpsiEiNrz6MD6/EAv+715MIvC",
-	"MeYEU2D2hqelQSEMzWmemyf/l5U9r2fmlBtfWfu7B6P17g2rX+51WDcZBtKBLUvygyHGUK6hd8HKNKBa",
-	"LlgyFZzxXGYLeKg8sdr76R3DJBWfb+IsaxZ0fPs7k2Fin8NsUe2FJz0XLvJCY9ESp4rPTa7J/TR6uyvL",
-	"Z/+crHsxkJyGEcT6Vuf62csyf02USaVFK/nkFrDJV0pLiLETWjISyUZPtugKnCnBM4mugqBNVy1BIDnl",
-	"eZZaASogp1JkIE4SLkDAVxxUCdAwiP6MMz9Zi3UVgJSUs1OFFXmchtbioKvIDz84TUBxJImKewObImLd",
-	"3PfhCnyivTM+mdicN+kRE66P9KO5KzKacn7RljZyYlNFNArY4SAe00kuiuaptQdrqzl15JNddN0ySCxc",
-	"LnHkYep2vue1U7ZNSn3g5H2i4UdGruemJiCxYyJJJQ5iK+sGuGd/aUksOQmsMs34VQ77A81Uq6FGzNxq",
-	"8AmvBaKtLmDBbqdQoGq39Sl2fk+oG0XdN0T1xds+1V3CqerMEJ1UbY9uvOIXhA3P2dWUJlOtbnGmJc8p",
-	"v2KIs4RsoVPFBUFUIUmSXJBsETOeGWDWBed3V43zZnttGese9a39rM6870FjdkCUteC1JQFr6+9FBS3S",
-	"w7YgzgzYLLy/sSMcvQDee2rxKYl2SmMX4VDVTY8bkYTPiDxn1MZmBbbmMnH5uYeokaTOY7F9bgsFDZ3p",
-	"ab6zx6ObkGDXqLjSJzmoByUV6FNm7MvTkgKRvpmOXjHT7Y4LlFJp/jsUnVxdCihE4ZI/AZa6lGTUhwd8",
-	"NFZfXduTrt5ZUGB71fbv1chp5rKfKKwHhVlV10FMgAzSmq5bobIpwZmatiW0wcNhhkXS2cDugSc5kkRc",
-	"QjnLmp7xFr71dafvDKvMOrct2rOcfDAlyYXdujsj6TbqTtwWijDnPSNK0ER2Hvix4DOipiSXm3qrWNFR",
-	"RpD9GnDQurLBMq4vwJ97tOrSO7vujdsLkWs8m2u+O/g39PbV0TFK8ST/ohHCLD/KaVaqeXDO/g2d/fP4",
-	"VTBwgvMJOWf+D18viZCUs7+dD3a3dl9s7ZwPhjDPlxQr8rfzwQ87P7zY3Nnd3Nk92/1hb2dnb2fnf88H",
-	"wwn/En75w+754BvaPYclC9jyuaIz8sW5Gs/ojCBJWULchYHPswxm5ZsQ4MpPP/68s1NdMcWTLyJn8ot3",
-	"XnxxNt/3+WxEBOLjuGND/7csg9IyWQhWy7CfGuEzuS5fFFc4Q2fwv8wD6MBBlJmkmAa4SpNEQSqN+KUR",
-	"mg4wRgtLUw1wmM+tF6QKAvz41Xz/t/OBpX+NLz+8+PXHjtFA8oBbP3WMxCMuFEn12L9G9tmyx/quZPxI",
-	"3Z9f1K7VW/j9zX+K2v+pdChXXrP+fbh0/dfd80jURZ3bFizM8y3KEBRztDEMa5lSWwc74OUF07X8HFC8",
-	"m52bjC2ocgaBP/Yot23SGSCv3EIfJUF2StdlAjx6wPBtDWGSIv03F5G1Fa2l/t8GrHUtsGfA+57q6xXB",
-	"C+b6zDXbgcC/tP5ewiWLOiEelS69E6kKhHDl8+rpjC1Oc5NN24g9hwDD3So8N6neXz4LALVUhr/c+sP+",
-	"slTPj0qolCY2PQopjsZEmUqnsar8eqZ4OXdzGUFFd3tRg6H76Q7quncSINzwjYjwXtQve7Xr61zUr0WZ",
-	"KcuqK8bRWJTmtRhKEyK3Ew4ud6y46CT65sIimb6jCZWmslUwZxCSEdEMXhYDV9Ab6E7bDFYh/Q4eEI1D",
-	"4VVZnOjQIj3mCCJ5LvR/2eI23Zp8UfDIlxoycyM/WQxNTuyPKyoJVYkicJ5MX5FpUernvUG2JltD9OPO",
-	"bIh2p00NNVLnz4sz4d3p4H6ZbPXIHjeWOuxAedj9tRNDvfqwMs4WKDRtfO3UDVtzrlaB8zvhaUHUWS+O",
-	"lkvbh7oVRYpC0VCEXH+zhU6MbCcRTmeUIcEzEleKPkqTinhnVwkL6JXaLtEluJodgzC1ex+2bIVwrqaE",
-	"KT2zq/r6492v/JqLEU1TwtAmEvWrWicTutfmcospDlXNv/tGOujREEeZM9UTPc0EGn8Gd+P2KRZYyuez",
-	"u1LaaCML/XtLbML9VzVxQscVwReQkHPFRTpEzr+u7/H5E/neW+TIS5twhDaBvkw7wYfLpegXOFLwgwgz",
-	"8c/e9lf9f7auZFOUqQkk1Cymm72gl5hpvdnMhRY8F5Jk46aIU8t2lhOPPgLIPQNHgbibo0b/zARkU1GD",
-	"69JXdW9GFriZh7Gx9IucbSCeYZeg6E0wQC6jhe1SeHjQ80V+Q9SK6WLnft/StKiF9PRE/clpSWtkjg5K",
-	"VckCwTbejNzk9bhn51lJPe9JSWaK2xPT6oXiArIHCoTqRcimrfN6CMVP3OQBucmTnF1jbLYOVm8Je1sQ",
-	"SdSmU+eao0hP9LiA7bkvkOJWqr/EWU56skCYTV/osVt4zTghAOiAeyBmaDOL2/ihgxDBNa6vmeDJMPAk",
-	"dVmqrzKQBjblw3KXM4G7zyp9ceUW2oeb4CxbxI3hn9yC6+oXsQD2Naf7A1xHe/JVcdgNcdjun5VWdQ2l",
-	"MgSdTIhw3emK2KNLissJQvrnWS4VmuJLgnAknv2cQSUzEy2+hfYLXgKNHSWam27MJEW5hCaeaESwIMIm",
-	"HhVZMFdTwkwbTp9qgYtmOhtGbdhDzyCq8Gr6ZWtr69lzKBx2VrTfQiOeLmBZLCVJgyJICJs8jk+v/v72",
-	"w4d/fDne/+fRh/0DRNglFZzNCFPn7BILqndSLhtDpS3WT1JfbqutONc5873nbZUpdHgQS4qyF3HT7JAl",
-	"26u0utD/Hl7KmAt/Cbh8o/a5embHly/DSTMmy6Hy5ShXaIbFBUmLEp/UlISYYSTNRU0xSzMCJi17ssjU",
-	"VkAvdna9wxCiFsGFPyU4BdnN+vA1/nFRdD3qaJZ9Z/kxgQx0D5kwbQzOIbEyuLYu3hFNp/cm5Xxk2OIF",
-	"SdEmmlEpbZijc8eYZLKHkH0cndlks1RDpcWRgsXeazGOgPIfVHl0aOs5aRF4ug61sOIvN0lyQdVisPfb",
-	"51JqlSG95se25V3n4qIjssF2DKvHvaRUM7tRDo+rmUdjFTNg25cxjB2M2LA/2fXXVsoz8HVJeY2RLz/d",
-	"B7m/jATo5cy3VF/TsPQI+kSjb8qIr4GmJrF777fPWs4YYUkT/S7bP2h8MBlUBpMqPAhPcrR/fFgkBOYi",
-	"G+wNvpqdfdvb3v465VJ928Zzun35w2A4cEIbINfUS7wubg8ahcKfq2fxlktli4XaftlmzW/xAMCpUvMg",
-	"Btv+U/8fUKvelz2deg1Ql1tnUu8wwxPT0N6W03JpXEU5XhnEJepJY4VFS5PaYEc9UzVGUy+T8YkMGnsW",
-	"fKi8kGkUWl/s1IR48spGihxCvYbfVz2r065gsaY+/y3zFe30QXpN53mVLiGYvJqJUcxu/12fuaL0BIe0",
-	"kfEJZUN9+jxXQytew9JEaxzPi9m1hBKZG8wTxQelyV+efDwYFqbF6LQuTKwG8/EhuiCLpqmxV/9DEOd0",
-	"84IsYtN98mnDRi2yCSPm4XPYHbbus1MGanf9VFOq9Mn1AEwPHXz7/O3/BQAA//9RdCq+htsBAA==",
+	"H4sIAAAAAAAC/+y9a1cbObYw/Ff0+py1QuYxt+50TzfPmg9MyIUZknCAnKw5Td60XCXbOpQlt6QCPFn5",
+	"78/S1qVUVaqLwYBJ82Wmg1XSlrT31r7vr4OEz+acEabkYO/rYI4FnhFFBPxr//jwn2RxmOr/TolMBJ0r",
+	"ytlgb5Az+kdOEE0JU3RMiUB8jNSUoP3jQ3RBFoPhgOpxc6ymg+GA4RkZ7A0uYLLhQJA/cipIOthTIifD",
+	"gUymZIb1KjPKjgibqOlgb3c4UIu5/kwqQdlk8O3bcHCw/+Y1zch7mK8KlF5fr+RgOdh/g8Y0I3Fgxm6e",
+	"Nnj+U5DxYG/wH9vFMW2bX+V2CIuFLQ5XBaY4OOyWoIRgnOQsdmmHBwEUmyJniAv0LMOKSPUMKY4mRMHP",
+	"My4VEiQhTLmhcaBTPDFr3QJwM0EI+SnBIpneDfx/5EQsohu4McC9Lr35DDsvPkIFWJEzOiOvBZ/VV5YK",
+	"C4VSrIiiM4LGXGgqUER/7kCRiDJ0ePoB/fLzzq4eMsMKXVE1Rfqbf3NGGg5sLPhML9/7wD4yeq1hlQrP",
+	"5iXoz3gddsLSu4Jc8VvC/ZbgCFG9z2cjw/4yyojUaCiIygVD+qjg+kdkQhnTe7D4EDKlCpRTvUiFI9JZ",
+	"Pgv5IWWKTIgAoI7ojKo6VO/wtf4KsSboGpbPYLrS+mamwd7uzs7OzrALng/jsSQRgI4oIw4axZHBUUFw",
+	"qo8FTmpjd3OEJUmfN4DGzcxLnM0xnkQIc44nJDgXqsgMzmVMVDJFGykZ4zxTiEq02wSKnqIEiP0IAOkC",
+	"iog4XFWQ5kQggDUE6cedIZrha4BuZ6cRPrtGFMSf9CWGl9oJ8gmZcUXe87SDzQkYh5geGAdMFDNFYRtk",
+	"PMHZIPbynyqschnldiqXDZy2srwZ25sF2CXN6mTezeelIvM4k5fu++UY/akSBEdY/KcpUVNDSZbZSJXy",
+	"XOkHUaqUCIEyPpGNxwCz9j8GGK7hOcM0uxEL1Hy9m/kpPf0SBP5RErGUdJpLIuIXlJupbi6bfnNDA8m5",
+	"DpkVjxFl5uXSfx0O5oLPiVCUwLeJIFiRdD/CRV/qnyhn8NaZl2k4MDOBMKPIpv6lTkBDN+vfFw2zcgGn",
+	"gw4PYl+XPqh+f5yLOZcEhX+NzEEjN/WxelOxDy/I4liQMb2uf/+aCqnQLyiZYoETrbeA1ODmS3ATMBmW",
+	"6qOMn/IRlgrhXE31JEnPA2d5luFRRhze1FZkUfbxNp9htqkfQv0xssJg7WPBM9IpsUgiTvS4b8NBPk+b",
+	"cAh2Z35fGo2+hfTxm77RoZdfOZB1cVfDAJFDgEJU/OxX4KP/JYnSoBvSOSFyzpkkzSQk3Igq/eA5tbTX",
+	"dlqWQqtbsh83AyaPqFTN0OlfNbexUMoG6OA/4Z3vC6cHCAuBm+CWccDnc8EviX7DTsgfOZERrLA/oBFP",
+	"F0BCGD7S0hlGV5gq/V/2fStviLJ5bowHOE2png5nx6UR7dxk8E+y2LzEWU5QYX3Qbwisn5ItdDYlkqAr",
+	"mmVoRBC+xBQoDWGJCLukgrOZ1vQusaD676AhyHwk9ZaYAqjl1qB2MN+6jqrpjt0vCI8VWeKkvLJZm/HM",
+	"Wiu0ThtnwILIfEbSFlEgmOIKSyTIJmF/5CQnKdwnuSZJXuaGI84zgpmeXjbKNxo0s0OSwrYaeFQFH0PF",
+	"OpR9zC6iWJqnVL1iSsSeTSQpm+gr14O0bIMIjKxRVxJ/omAXieHkU60wYhCwNc8jKdogW5OtIZJESsrZ",
+	"F1BOhijhsxlm6VAvR9nz6KOKFZnwGMQv7S9O8jCAk0uNkHY5RcSMMpwN4eEdohRPnsffXi0XRUTff5x+",
+	"eL9JWMJTktrdbco5SfTDh9xXN32IAWnUlEp/0vV55vtpKoiMgPYyo3qnh8cImyGIjgvKjU1WPEUxFGdG",
+	"ioTj40mSC41mfUWfvEFMLOxJIPlcTXmAE8pjTNOU8Qf9o/3lhlPHXtjwlfYYNxz4Kbzs6qFqpK8jPpE9",
+	"GFvCmcIUTBZlitNkVqU59/fGtzA2Rb+3r2AJtfdvOFBc4Yg2cqb/HCj4dk00wyqZ6h1ZJUSz7o0RGXOh",
+	"H54JZSDoBRQYahrhnRSbMBDEDvvlFLMJOcZSXnGR9n91E/2dBnJuP61rBxr3mXJTR0jPDPAzwLyXRITi",
+	"cKsqMxwwctU8/3tyVcytODJGmWDGX7qQurqF8oINx6neESmjhhP/OCSas8/MMC0DYIaOjt5pZL4kQjYo",
+	"W5wpwmIWNDuPGxA5phlROMWqU4EOoH/nPglk+vi6+le9CY2tlR0QplXi3wZyIRWZWbrXDEFKKhU2wHIe",
+	"YmbDTVih3e2x4+jfBfutAm1+QXjEc+UOXsvACc6yyKHP5hnR357xC8Jkm0lBwYjiJNyXg8BstVOn2eFg",
+	"xlMSYQ/v9J/Ddy6X8JTUbncu+GyulgXQfNUJnJVtRYRpHr1zkq9AG3xOGKZDhJmaCj6nyRBNiJ56iIhK",
+	"tqLyAnClJrgNd7Qwbxho0f8JzvV5B+zf2nFkydclJFmjuuO47DzF8h0XMflUaLFlbERTKpFUWk8QuTG4",
+	"Y5aimebwfo0ZXiAsBL0kUUHYjWt+zUog933JQgYWeco08IWBs22i9zwlzi4ZfneERwbb+31shlfZQbCr",
+	"AKL6MkN/HVGOYeTmRlHeytXGaUOVRFhM8hl4oGvivJhEbmLfjbcyKnFThrdRJ4vKmbtvorqCg1Fxqzh1",
+	"azxuvviRMKMaR4xngiTuV6ObzHItERCk+b0cU5IiK6V4pDbIzkVg7q69ak3rvbqeC6PnIJA3SHIBu9Qa",
+	"OFZR+ZkIwSOc6pX+c/Hejt1TZfdCJWJcU0r07STXc5KomEL7yv6CtLKYKSdHFxNbUBskcxDzuhTlYjKt",
+	"CJZADHgBIxN9InW9YYzAxoeofpaVrExp4d4ATVyrLsVPKScSvf9wZoTR55FVa0jlLjKOVlykWnDl4pDp",
+	"lz+JQBsMQtSOQtZr0maGnvKYxPqWSwXqzdWUCL3rYHLpMDSqLNqlD3spn/7S67BH32ouIrAec6G8z3Fa",
+	"AzajUhHjlmWD2CMNdoC4EfXk9csff/zx18KA6m66WMF+HQNXNviyXpY/N8zXSXta3bs0nhP/nzm7YPyK",
+	"dQt6wekPzc0OA2+Y36c9yQ5cM0/Bcg994abDWRa9VxnhYn5Um3apn3sy0ZcpSNo4db9nOkJQXZbXEpTR",
+	"kwNztzNrN2iCZhAqjNtmXM2EuLwfZoavnWb2087OLR0TwWS71nPcpkgu57aoHGzoWOg+1yZkrB3sSrwG",
+	"4OiIuKPyLINlJEkEUUPEWbawzlCSIh5lX3EPhFmhed9wbP3tCuA4BNmBkSvnBy2fwLxR5ddrPZOhTaJV",
+	"3b+Bu6rZnGaeBj+ghII/vxh2RgyGRxvMEuylEcEO9t/EeLQwhvaEszGd5ML4BwNWl5IxZea9B/XDac11",
+	"Woaoh2Ms8CzC3w5s1Id3iiBwkoCm+Y/TD+9d7BMdg5xlDb8kRdgHvdlrjwtKraykQv3Bj0GkhUYJy3L0",
+	"Rkdkii8pj7pwJ4LnEcvuEZ/QBGcIfrYBUoJkWIt/B/tvjIDPxQQz+m9sXEtuSRkX/q734W08yWPKbz0q",
+	"KuHMWqOK+DKcZfyKpC54gUobtFkXEOIo6zZVD/usyy0Nd+/etuLu9WTS6AcJZlo90BhMQEPxkFvHag3y",
+	"/koROIwi1o5gKzDEz64FKSwlnTCAZQsdVtBx6D1TcB5USZKN0Ygk3GzITdjo+c7ZS6C0Ln5y4gfaUIw0",
+	"z1octHaERjriVSJpiZdNjDznT1ZOeZ5pFO8+49ZQGgdWzJyNJy2YoH81nNw4AOi/nXmjFCEpl7jt2HPb",
+	"wAYPmlxQ5gdDrRWO2KZbPDjry3Dk9T6jMzC5StDIwQd9haly6jeIyeYNLfTuOlO4V75K2GUzzsSd48Zk",
+	"7zZl3cKVXfVnGPfE2KeYpRkRH1gXhb31A/VXEKqhtFbJ2QFetNpxU7xwoWuYMqS/5QI2YUPp6led8ckB",
+	"jVhGDqggieJigeZYTWGvMBmbgBdsTLO1eL78cqeKzJddD6Iq/GKUGfxBTVTRKt3VvM7mwbiiakoZmAgN",
+	"mj2GF3Qe2POiKr77rWzsmxUkiQsehpnhOv31V2cuenrb1+ltl3EC8/ACLRW2Zk1O/VGyPXaXzB+bsPGa",
+	"xu7WJXMVboMeNswUT3ok9Hgbd8uRmN8RYQnPmbE0pblw4QSFuaY/oxg35rHpA0ClZCcXNB0JY1VEKpOH",
+	"1C916TSfzbAJqJC5nBOW9okqoxIVozut1kFqnb6BCpjhwv7gW3Ahfkjv44l+PiJIkAm5BkVfKSL0F///",
+	"b3jz3/ub/7Oz+euXzc//5z9j53mw/+aNoOmhIpGoe/0LJGeYkAoqc5wZ0nAM2wfZWfGhHqDm/l6b/LSU",
+	"x2AdPCkg2miBbGhTL5ovuwiraMc6T9P6X9tNKZalu+00XF+vq1vJrZ3kLFBScJZ9GA/2fluOIBqVmzqn",
+	"8XKKYd1WUvEv91bt3hlPY07l4tYpS+klTXOcleesZLX0RYDY1XP2ErOkn5vYjH91bZLL+o1+jWmWC9L/",
+	"g9M8SWz4YJ8POkQrL/KFwxqlrDCNdJVyVpVO4N7r5PF52IFsfBwIgpQlWQ6pcjIf+b+aueOU1xBo3Cpw",
+	"A+aiM43VWsLDmVG7ixRbKzfnVmoWZEwEYQlpSrrVZECu8WyeQW4hzHJD4v6QKxdmXhWos8z4i7kZYgQl",
+	"YKCeHUsUUucwOM+CYzs7LYi5JewwsTGaEecKMe4XugIPKJ6rXDhZ2P1k7sLHrJPZXC1K1mA0piRLTTiK",
+	"H2A2Levco2+kmT2lMMqMFwd3w/j84oTNq2S3iCW6CCL3qZBb6J9kIREW7hyszrXx8fj41cmXl/unr2wo",
+	"mzIIlOAZyV5iSfQTZ21CQwhLyKXiM5MpNS70jedwhNYWhC0Ruwtwa7pDRK/gTO1NgKkofnMlLIXYCdBI",
+	"Bl/PBxdkcT7YQ+cDWPN88M3GsGfKCKmDba3gbyu+bf66pa6Viwt9qQXFwd7gxQ+Db7Hcg3LgjfcRuPv6",
+	"3EjX7sFqjPyMcJDWXIR++e5aYmVUThsd4ijmEQ8JyX0fFWT5JOLQxGqq8URP4gwngxYPZq8SCc02g5Oc",
+	"Qd55kIZSmAjCjZTNkA1mCcJUyIeXEUnguJuj1c3k/mq/fa4s2C11VWaIbMBkjtz0pq+wNKp/Gk9m43d1",
+	"NHrq8sEUi3UfS+nreNxGS0BI56n0igjpk5DsxvcK+isF/K1I80ciZ3IpbfeKi4uuLAwzxkhs1hKSeosH",
+	"nODGM0gQfwYgwn8WD/jzQXe0cwkVKog4DHOWrHoThsgE0Y9hwEzAFA0XizHuV/EIujeEEUETY1zwoQn2",
+	"yYqEw6SdXA4Wemnl5cbEoX0vCNila8lCBeizprD70ykXyn7vBnXHSELmvxveeFQvo7UGTMChngO0pcRE",
+	"NGjM0bN4K00QMzXmYkTTlGhqHuH0S2GnYVx9GfPcxIwyLY7i7Iv7PGc4V1ON/UCt+ssJVuQKL+D9n3FF",
+	"vmjh238ww9dfRM6+CIIT88Dp+YtoOJwJgtPFF3JNJYS56vm3KsvA3yAy+wtllzij/o/hNjR/4bmKhHwN",
+	"B29DL0nN7hz45iAhEJKprGOlLCDXUa+X3uiMjaSH1ujGjvvpjG647KcxmuGxUPW3BGdq2iN2zcqNTj2a",
+	"wnc2XpawdM4pq5NoU2Dfh0sicJa5Wco1KyQRlyTEWjNqAYjo/vvzcilzXhSEuVFjZtwcfqnTtvnM/By4",
+	"RKOunUsiZNTZ6YCwA2r7becVnve6+T244c5jLEQ/Zmd4stwlZ1QaN2iWwStYT3O7dwtx+1Nti1xYWG9o",
+	"h7dftxhhj/Qre2Ds6Dcxrjur3M1s7FdTmkFSjaZ6d5bm4V/WMddt+Azn7WX9bD22SdQrHjUihrnZPdPT",
+	"9FQtqWmN6TKBYV8Q0KEhPcYUbokk6Abh8FS+korOoiHxob9Az4XgCsGByBBxn8Vm1aOtqtxVV8bFUUa5",
+	"EOjcR3pcd0qomc4aV+uKZVPiZ1ua3BGfUNY/HhOygiGvfFVhmLtLZyk/k6WwylvGUbYcynLpxuWyK1oc",
+	"qrPi6zkVRMb0MMh7QzDgppVyzJr1bPtPZ03QRQ++T/xrnR/bGYsd2slix/uOKEGTY5BEaty5RTj4yOh1",
+	"/FwoUz+/iD/yODPBA8UZ8rzEKQx51XcUrGMmiW0lXlys8I5gVnWQ1HwukYjuueCXODtcXYESU+vE5Wf6",
+	"B/7t4dkRcsvFlChXQGOJVBLNmmBes1ksfRWOGMK532LlncKKBFdTXlTzKC0RjZPjPXizFcnHeRZkkRoj",
+	"giBzG3ZuAiBiiLVMchkcxRjcJDFwO+yTTadsZm2xTQryv2D/vtXtuUnaFuhze25s9+2ZkZSzE4JlTD7/",
+	"MLdGAAED7JXZj+IzKrHoRAgYhbBSZDZXEs1wSopiImVgb5Vs5e/u1na1alLtzRNq9dcpEaLdli0VZikW",
+	"qbWeOAmk6ZTC7aRa9+83ufWHLDM7mfdXxEfxIEUf01Q4KiGKjCcUwphMqdYAjH5xTPnIRo/EoqsMLCfA",
+	"bWLRLA4mYUeUgQNkykG7MAOOeUaTxQpAq2m0sGF7iR5VWuyJDfbHgA5DJt30sDaVznyfz8D8aM0RVcOa",
+	"i/Rk+u96DNk7Zzt76HzwnitHdOeDc7ar/3ZijF363z/of78GNq3/+aP+5/6Iu+Ev9L+t61//+yf49wWd",
+	"z83vP+t/H2OhKM5QMO6v+u+fbIGtokQZzvSPvwAMljfqPxT2lJ3h7vCH4Y/DF8Ofhj8P/zr85XON/wwH",
+	"15t69OYlBmYr9XW95+rUc5YTb8t77d4fu6XB0G1G/5fZxmDoNlD8ZCHXc7mn4HPpgjzHaQ0Zt5cVRo47",
+	"NdIWXnVmJMbVl4I1FsZI/4BivwF4w4kJyJJ+C3OzhWzxJfz9yu/DP2kx41TVFR3J83aed9CrrlXgG7cb",
+	"cr7QmmRn3paYN2Hf/BRGOASBNA1+He/hX+L1IQH49uveGkaKJ++Xc1nexF3b5OaEsmGSCIoz+m+Stro7",
+	"b+uriteZcPsvuVyKSw34XngzMfZ27As31TUgX2Yo5r1IfJUkXw06HrdOrhtm0L90fj4X5LKhDLUgl5Tn",
+	"snMKMGwcx2uSqIphY26rdzTMckISLtIe8wg7sNMkUpp2WDryEuTBQQaHErvR/4pHqe8bf/K2NQWahAAj",
+	"TEgTDwGckUpFkzrDmOHrly51IVksmekQZlVsoddcoGeTjI9w9szAJIdGnqG+EAR4WkiKysvab1M8MYXO",
+	"45+b/J9SJkhRAXy3VJ1nt3+iRT3If8PsIYjQtwVFbCw/xMuYH4v4m+ZIgU6twJaiLKQu+5CXKqy0F01y",
+	"T1hzaR5zY9nCl0rxy22MeM5SE0xbvpbnfQW9Wvx0VQ61i3YeRTOYnUdg/lIzeln3p7muzQI/6RiR63lG",
+	"E6pXg/wHkg5LOEjHVvZ1Vx9IEGYaw6bN+O5KE2GuR+VIyrhS3GcjGzjU19JsP7TMn6R246ZufmOGv7/k",
+	"OPL4KA244CWqFHbixbz0SLVNFTxntQoeAEppssZzW7bEY2bZgHTaGaECmSIjIWqWj9N80V6Xoz5rWJir",
+	"whL6nrd5IaJ6oA+M6/xe+vuqnLPdVjFb8yk3BuKd1l4khBPBpQwOpXaeJmgQz3FCVXzO0qlWuJiNiuxm",
+	"IHqV/zKhWQ1+khqLpqyAue/sPbwwFsGWmfqk6QWoQF5wWJ/f2rlArmhmk1GPiUgIU/GwFyi6uHlFU4KC",
+	"T9BGCCDaRqXrRH9x7Tq8gjDOOIQOhq04oiA22dWDo66cTvmWhxXMatppDM+Nprpc4XBrQewuhy2WN0ta",
+	"B3BjhkrrBnqW8+4N/23KebfX2/Y23tvV247f6Jxg9S7qbjG/hSHx3JpunfneCQbglof4FEUjZUaj5pRP",
+	"9puP5hsPi7W29YhYgtMwJrowKb58KyOcXPDxWP8nZ8TGlcbqSUMFt1wS6SLP0SzPFJ1ntv7YD1s7MYd1",
+	"PcgFQtXJtXlmKM6QBSGYL0b4FfL+DHaIoGxf7/wTck1VPGDOB1ZcUwXmPZsOowSdTIiInGU1nKImehav",
+	"LUTNXUYrMDfWUVBXhDC3rPMQxFPr+/a1ArOMyUaBWev8oZzxfmjBPiVJ8/Rub+EuNhI8l6V7ngh+pabP",
+	"oysZaDrzmgtqbGBfkqjlq0jjdEZZUaRZEFOjuZKRtmSRZ2+Vs8Wjlqn43FXf+YRInouEvC2yIyu2nHne",
+	"u2NG6BaP4G1K5cWq5sq4aQm3irlmZGa3fvvZorgUJtt3sVqtHQieQQo9xKoARZiK89Zj4suhBPHglQeS",
+	"SjzKCFR5eZU6cratvsY4k6SWBGe+CKo2kNS8wOUla9bJIKDIrgqv4XKr2qwj82o7q0e1hVBTznNtsxFI",
+	"PsevRQttZ9hgZSU2PggWs6W1kcLyIhBwR6RIYyNpTEi5H1MzYergll8uCShE799gyeK7JRe8mYsa7qvR",
+	"Rd0sxhVG8mLdGAKdNpbDcL9UCjONi8LBYZWkWoiVrZsRK6nIWVBYA5rOuaVcbmfXRoP52zbVUtfWD1l9",
+	"VVtZTL36mrayBvfyqUYxXCvmvUHl2dPwY32GG1Y7/xua8iyVKOPJBRhtitoqz++5OG0rnty+Jm39Xuov",
+	"mh/Tvx5tfNqlKsr0r0UbwBc9LWisfLD/Rr7DKpnGq1zYgG2TPirhC1OuuhRxF1S5rJ1SRlmssYXrv2Lj",
+	"gxtjl/Xvxlje3kbW0KoFDUvk0nkaYouOolCBh9+A5OQecq26HV+wxxKs4TLNh38CecLxkz8MIhzNudtS",
+	"4r7mCLZSz02r3Jji6LL10oNjJTZT2idK9cLaCJLdKBzfN+xZIiLflJtx24xew+2CYYJczjuNhzHGu8ce",
+	"DuNNkH2jYVYUCVOEBN8yGMYnMd8qFubUBtY1kjvIiEHdYLDS2IZhUrNh19VNk70rr9mar5dlcdNipSht",
+	"WHQMw0pFZFxDpMwMs7StPYodEc5sOzHC+fUvsRJ0EYmp8WROWgHxttOwBoyLJymqwNhAxHgNmM6kolsU",
+	"+7yaBtYq6AwRDRWK1Zf8xMUFVJr2dSaDDo+BjfyZDDqjRFpw6PFcNFkFXtnfI+pDGL9ZS1iyk8WD7U1z",
+	"3PhCRfPC0oqxgPp2P7jbmeu0+EzT6bMhejZVaq7/P+XJBRH6v+z5PHvez58Qa53o/RUSMqIjtXX0SW2h",
+	"l0H1HMp8RdaijI5EGb0g6D+/0nTLBIl+01SEgWcaNCkOewu9s0WNbCJguV5UqW5KvNYozT6whsT0oL+4",
+	"JCxFRI9GjBc9lSXirIjHz0U8uWvZqp9hYkeZj9fgN7GB9cn/2x0rcDq9AeXKPVmSsF82FBPNstjTU7eQ",
+	"ubGBu6RcP61X8MG+ZiRFz3/T9RauGwy4ZgmPOth4lBOEzWdaIAyKMHGEC6wK/fvMfDAYBi6R3jyuNuKz",
+	"MaR753MvM339uOQWcnWeqUS7O7Vqzh2hTjHybAp5PC43FsZS+mj5oJ5Wj7Iuty7u6rF8tbVdRcWV1u10",
+	"sGOhnqreQcwmoP/baWqlHBz7sIPAYEY1leZpSoeAGpe+OrIpxWR18iA1YpkciM4Zm+ne1lRodQkVZA45",
+	"8SWOVXiJoHiYJMrG9NmJkcIXREJhOpICrfLLorjmZkYuSebHlt7Xre5ufL3Kqp4qQfDMdGu1zSMrWQif",
+	"Axeld+PWJVmf7NDcA9J28SsJkrcvPtWDtMvRy8tQdpMVNnqU7giMztxSE7+a6o0rMLkadIrOXEiUN3s9",
+	"XLWuEMa2rLg7vZAb11oKF1mDekttURodpYXiuAeyYLOZ01UUskmZzcGQzWV97Jd9S/q01fI5MyzNC5n9",
+	"Cn2Z4VrwaCaCFZYMc4E6pjI8Z4qynMhAm6IMIjomAqxg3z4vwS1qVT7tiVQrPkGApAdE4OTCLBz6MWqn",
+	"+5HR67O+Wd7lIi6+3OHuz3/94acfd3d//bVXFvjHedrdyswMul0rs/fkajVtzPRE99S7rH5BcBDLNerK",
+	"9Tcm+CzapItK661OW7U263ouOtDjJLFR13UtbXXdut7b3mKge23MSgrq8+V7d9VPVMacAh9NgEKz0w/n",
+	"anrc2HF5v1zUoWi+PMpppij4NzlNk9DfZX/SGhVNk6jRz9btjz1g++YyvPf1BkUqaNraKy1QrqNf98Gi",
+	"CupoLS11X60EjYA8ogd0hKUypEBucDbLlD3p8Eymg2FY7cT1S/dXG+7icwPCLueUzLuQ+ca1RRrriPhL",
+	"iVMWdKJPtUQ3s/YEIyHM9R9Ma40tE3K2h8Z5lrnfCwEX9jTDDE/IjDA1tP8t9uDNe3ny8QCEX69iDa2d",
+	"m9sRgYmFZYshuqTkSn8tCE439Z9CT7QGBFgNLKEp1M41GA7Mh1Fy1VuVR9AwaJnrylw1Lv159K5k75Au",
+	"c2sdLl4zZewaP5HRlPML0x6yxy5Mx1rXGBLEkYkWH937c2XmQxvmIok0twslap5H0heiVXOgI6abCcag",
+	"DWiKKaf8ikFHzKE10UmS5IJki/8vmmZm5+g6Q3sIvupY5fTcLK7KT8s5NvY8s79XzOK2hCbaMJtkXFkC",
+	"MGlzFSt589vwyWky7tCusO8B05sD2vFN9UTQ4QHUEnGtZYLlOtKV23twgNnCX7YJMpbxtmU9Hh83EZXI",
+	"x5REqpItVeW+2KU/yDyn8YrUWKqPcolL0h+4XS9xV4Avx4KM6XXMqCWkQr+gZIoFTkCptudt0Ezvy20z",
+	"aex31/LSNu9kxlNnhu2zkdjLWYSwhZssrn+Zl9RSXTuHDmNw7IbqTNn/0JcvV3lKB4f287dso79CUCGn",
+	"5tqjK1WPvU+LpmQ25wpSzC7IAuybvvyVfrR927egssvhAbIVb5GpeDs8Z1Dn0MJuK/lJ9GLnV/SSs3FG",
+	"E+Xbi7nph7ZZ8cePhweaCdjHiaRb577o+cJFYPf3Nu6LEVUCi4WxQNk5qn4BvSks0adXf3/74cM/vxzv",
+	"/+vow/7BIFbIv/mOO59gaFWxzA1382HPgJrKNyxvS+yOUW3B9DM+mWSkE9/1scNIfxyWSZhIm3p8KutW",
+	"gs0YLdmE6nDtoWuK6HZLRDcHpcr7BWynVB/+CKqZmxLn9aSlXC6OeRYPLCwSx+dmSCy9EUJI4qk0poTw",
+	"aS+Lp9nX2/CL5d9Yt8fIkzoi2Woq8UHDEajlCXOGfQqjQBRXpx+3twQLNSJY9YuvdfVh9bM4dZ9Crxt6",
+	"WerM17x1UYT5t5bflxeyMbgfGoGVlun1fIUZBrEqw1Clown5qkm7HgWLKhfeYVXdfZOXCmQDiwuV9Ycl",
+	"UqgcW/3uKsjdTKlvKzRQCdSJleW23Qig7AHirHLxLFlEK3ZfYWEjy9prdxuw+iqckTrVda6yDiWrHSSN",
+	"S8bB7ieGGfTqFL/8rI3lmb8NB6BsUrU41ZO7eqH0zCmxI4IFEa+d3Mvn+I8cUjFguH40YECB61OloC7e",
+	"CEua7Odq6sLFzWj91+rgb5BBMOauzjNOgBkZy9XgX1xh9BbPcIo1MonMfif3trcnVE3z0VbCZ9sLrhSe",
+	"ztI6r9w/PqylckEHKs6obUZ8gCe5Lce+BcHMCbF4aIF4c3y0+SPkwTYCkOJJvsnFBP5je5Tx0fYMU7Z9",
+	"dPjy1fvTV1sGNEUV9EvSKwYl3fcGP2ztbO1APM+cMDyng73Bj/AnaBM2hYvZxnO6eUFM++YJiUoRRp7U",
+	"cr/1O8gtdGKwQtp8SMEzsuXtQZSDDASIaRwa0jR3AoqDpX7Y2anU4MbzeWb1rO3/tcnrBj27kNcuUaJ3",
+	"wIA4mbhN6JN5sbO7MjCsb62+8HuuwurGJDUr/3j3K0duySCzTdm76/XdD0H9EHMNITINXDX+3wYeGUED",
+	"iaYTgdHL+L5MxXKwW5qC47TklC3jojHdGVQZGK5GpPo7TxcrO4ZwCSeUfyuzUK00fauRwu4dgdBMCy+t",
+	"0QsQcefuEeHQNF3x796flvRe7Px6D7vWOmvZSvDgZG8wzhF9nOa/DYv3aPvrBVkcpt8MB8iIispwl/yC",
+	"QB8EO2/Ph+kAJvTMoKjS2GjXKYbY50Yr759rlPwi4pC0vnqzifTPjPov7mfXJqXqoRHe4Fg7wg/bRS6H",
+	"OqMFOjzoidpviLoDvF61sNb2NhUE423CTwTzJyCYN0R1Ucscq2TaFBVV0IvW/HqSSxh1dVuKWb1EGYsJ",
+	"6yVR3ie9GiBTf3dPMuV3zyf+tFJsOf6yRYrNbXWcdpOKHgVNJAhTghJZ5GWrKbFtYVEiqCKC4i20D9eu",
+	"9d0GW4ue74ibBntLcbITaLz53jQ3jWR/aDhGCwuw7V+7cCmAJnoJZ1DyTQxRiqF+BdXf/pETsXBNX/cG",
+	"7lNn7sMRy2cbALmJsGiYXf9qAsCXnttdgKlT6BNM0Mbh6Qf0y887uzacvmljEFt+Zrz3xer9nPsdIIXp",
+	"tEvBRFi6IojqOWcOOCgOp7E5KKRtqnHGIDKV50J4PDWbsOGgYOdOV4pasy8vAE5e0DnaMEmFrrhvE3R8",
+	"PDbF3CLg7XTkCt2pyOzIuo91s8ZT/gTv4mvXwxdtIvHAJs+PjFzPTYVR0mj9rN1R8JDAy+FeETXdTqaY",
+	"Tchm2LowbhndzzJ+ZQrdl67BME3FkZnJFovmVyzsdlgxlsLI4+LnOzGXlhZ5IPG2mvUTuVEHoT2/NOjK",
+	"lj2YtOve3iuCL/w9Pn84WkdcoCvBg2ouHrnWiPoMynkQ81rTz4IK1TQkQtNOtJn0gqOQNr3ExGz5jA3M",
+	"Ur/Q0AdpYfSPT2c23pAzh1l14c52M70LMix1V71n6is3MY3Zgsr5IwXl3RumO7pLBElNnRW5BhhtPeyD",
+	"vd8+h/gd4qFNMGEp4iOFKSswrQXPTQRcq9JCa2FY0JnFx9XU356YjdL2L/9ofr4zBCvliMT8YAEnKGWG",
+	"PKjQtC7s8g1RnldGrzWCRimemI4TLXgkKLkEPpkFMcVFawTNN7kLkjVKsFaJRwvkOanP8K0rwSa2cnkV",
+	"2IfkdY48wIpoxeq14LNlxp/xXqNtbKip9dbniz7Kuz9de4oNKpD9aXn9OZwf0hXwRKINqAC0KYkGVpH0",
+	"+RZyXATGQnDfwf4bW9Jjii8J2j86KsqUwDRbDbDa/vrNsN5WJ4vFgHc3uSm1ZLFhbxAb5Lr1rab1TTRw",
+	"OBqQVX9Uw77CPmDiPvmOS6Uvp2o3BYoETWwcw/FcpjlQxDicZVHJzZb0yhYG73ARa68RtlSSGm38a//d",
+	"0XPHaoSSRZ7c1jk7Z2dTKouQ+5QTCeH19kZgbrIJNktXxXtMM/J/bRkFfaAkRb/rNX9HVEugQtqYf5A2",
+	"NLGcM0lnNMMiW2jl7XfNWeW2+/n3IYy2jRf1HD6Slc5mJKVYkWyB6NhMuAVVCsvM0pQGIwbPNC87nZPk",
+	"VpbDW3hB7iPf4vCgWsTw/+oD4jOqVJESwRkpZUSYdIh4zquf2hXEyl3uH1z0nCQwu0bCeE7sTcoqLVHn",
+	"g7JJRpQrAtBWp/1wbLt2zAW51O+9rwdPxzYPxbE1JPVmTSc76Q30rvnURpB/8jyaVaaPJVLZpUaDlCFN",
+	"hX0Ly8C0cfa3WoXmtuVj+pe4iHiAXF1xyy1cGZb7tkK420K2WpvlF/flGtpfAiHhmBwhAKO0uSdr9+DZ",
+	"EKkiXZsEjxe8WZRBNWVpGHXkMQwl8G3C/nANP+/2ibQLSURVWC1zfd/KORGSSlWktNgmh22vpdnj02tp",
+	"XsvgsbyiWYZGZN1eTHPFBZMod0Ts8Xr+Ee+W++GSCEFTEuCN3YZP1mkprfn0+N388Su6iBb2d8d7np7A",
+	"yBNoUX5EFpyl5b7H6/f6WQZ7uyfvqz6Cbw9te/r7wqbmP2YLlO3Mc8f2qicbzfdlozEHG1TVd694L8Ld",
+	"/uoehGYafk1M94zUlQKtdyby6eEeCgveFvooCXqWaalXPUPYeMvdmjaYBTiE6ZLBpc1ILZpT+OK03kbp",
+	"mntHY7HDcqa3DsvqpsRlifZuCDAo79NNPU3lhMpT3Ypm7iVA0uwGVJv7j6fuRazu9auRDh+X+l0sTavb",
+	"KfHCcpRmD0j1bQ9KPk8x1L8rPIi+MUg1aSfQwB4RKT0h6TJIWqBKWWG7EV5mfNL5jkDxHI+NGZ8U3aDs",
+	"ug1M/YhP1hELu8eeYZr1GfeW4F7zfTBxkz1GHkH8550GS+pbWbu34UhjFc3Io3gdoBJhmSJu/UBkfLKd",
+	"8ivmSkrFXwk7wNIkU1TUSFMfYjt9ulnWmki7KUCRa7U9zzCtIEDVDtSMa0UbwCnBqa0c8tL8cfOAyjmX",
+	"NF4hel8pnExnWuzVM3UGBXx7oqPgAbP4dyd0ZPpsyF6Pmh27pTdfYITrW5Nlpr+GHYUSnmUmEigoU1OT",
+	"1ooAjmAF090MrKm2mI7pc3hBFhJh25jFjLVNwzYSzi6JUK7A08fj41cnX17un76COGU8I9lLLAkaLZC9",
+	"3CHiwjWRhhS/oAXTc+cMyEmxnmlSQlxrEmSQVbYoaR/s2X6HSlq3FuY2H8H609Dc6vTj1KNXCSMKLHK4",
+	"AfYAZ1eBOoQhYrmecSka5aq4M8bd90GoLENkNlcLP7PBta37lJ0B5sfwhtfvwTr0bsN8BJFBP+y4S/EI",
+	"5yyZIozGgshp2ZSL0ZRKxWEXni1eTSn0acslBBsoaSoWp4FNvU6zJx6SNdcGV+Tee9/uS3MWKGh9BL4p",
+	"Z6Vi5AqJnG11Fau8tdvw1bXeEFWuw38IQLP7sFp81HYAqVl6Htpr5ZuVRhuNmqj/q6C8MpRsxdKpsJRJ",
+	"RXBqOme6sJoiSmuru15mUBfUQtLHIFbi3I5i3Nk7TvBQCSxVn9k9cPC3jv3U2Pi9uOxcNV60YYmknNyM",
+	"TEE5YwdLFmiSY5GiUcaTiyD88Pk6vjoOtzy/t14Ay35Mxu5NHhwlFn3CVwJ8LopKQmDJJeV5cHqRl0SJ",
+	"xZ/jEbmjBk9w6NZzsjChH1qxaH+ySrWuh6aEW9Ev2EWUGGEz3bpNU7neIRCP0v8G6FtX025EbS40pVOx",
+	"hMCUcrhK0KggaLWNpeQJhWDFooB5p1311oFVj8JTFg8EOrOHCIElq4sBWjMXBCArF0ZufQTaVD08q2qC",
+	"vAG1KTKX218dq/y2jeeaH7aoVvtmADSG1VzSOc4oQ7bjv/XnDX0ES7awTNa0vJvnodhlJnC8Fl9imkEh",
+	"dywRYZdUcAYWQNf1GBaS+cg2nAcY6lEwFkhLybZb8+NzkZy6F+yuKjvZc9LrBLm3d1rIKVyxOSNS/44s",
+	"Lj5QqjuAQKXt81NBbtNMyXA9g9ISQasso9TeNwsDSlxjHmZvHWF05Y+RzIF/vT08O1oN6+rrZvXOVYYo",
+	"S+klTXOc+TbPPVyuGjMerdu14CmPwEXbZzvQ9vrJmbvWoksRz+Bj4WL0thomcEMXb9mxuyRvKLt7/zQM",
+	"oj/1PTmSH7sj+f5o2DYc7+dfPjp6hxKtQtivrHdnYWGFn/TUhYfQ+O8gOBoGMc42/bA216ymjHcOtu9B",
+	"obij9/LlFCt3Tq1lT4Jrk4FPty7uP0nTcf9q6QAtcRptdwVkKAiYbhotASfw+40NARgJgqW1Ypi14qZx",
+	"/cuTJt/VAgyO6R4V+XDBDj3eXO5a6vFP7CXGXiB66k51den7tDUUUzc18swTH+YHlGWPK6qmrXK5qZRc",
+	"cI9TlzX3Z+UhFfN/r5aRet8uK7Bq7W9qy7dqh9fD1XK/v3yIR8Ab3mGWwztuWjnbt/9Z4NsuElNvwib4",
+	"vFneeM1FQmwUieJzLXi46ho+kM8WJSn6dZoWuWWmcGYqhavvNolnvXDGH3f9wm6GJfloc4n6forOfAGW",
+	"eo4mCM1ZhmQ+cm2uJdowff31Z4LMDUp5BJfPIy/RFoI263MsCFOn+cjdJJT58AEGLohU7wAWAoe11jz9",
+	"XAUYpl74LM8U3czIJckQI1As5GD/jXweVVP9wuv6wjVEDppjK23+8MAdacfpURk/vSDaDWLhOFfuN8i/",
+	"NV1tG463qdhf7X7vsfKfzEcuq7xXVriH0iSvduaFu/kfhe8erXkI9BuiyizFRJ4YVgQtYW/L+ba/ygIN",
+	"V5ynbiFv8oJVMOtxMJsiWizYXSnX3nb60nzBkf8cq2nQXaNE92Xp9r4rgP4pk9tPg5t7tBnuZeJaJRO4",
+	"rQe8J9U/ZRzfwp29LFMKrmu9mNKTw/y+HeZ3yjfuwGnewk7cXI+Ap/QkWHd8D0mwTz7279HHfndk3xpq",
+	"H+bTRkLtc6dBl0HdtApPqwCxrqH1N3yeIUp+zZWGeJx/cwqFvcrVRfufWtwor/bAPv/TAmHX3ZjgQD3J",
+	"GToNz3DlTOHuMgIKd11ATmuQJlAwpvWNL+jDmILCGsZtqi+DuzD61bKnp+SFp+SFVZlyHm8CQ5WZ3TJK",
+	"YgmuvKpkh75Gn0cd0vyI8hjWyUS0LvGkT+akO82/uEsN857TM5ayOa03S7uJ3QkO4sFZwVPayBPr6Zk2",
+	"cp+s506ySmrbuFWaSYk1rXmmSQ/+9H1KI48yu+WRqVudGS73zz5WlQ2zjBFsqRSZ79yKZc//ezNiPeXt",
+	"rHfezqNjnLHcnYczU606z6dNwTO5PiU2uNbpPj01PJtp4XmhPaWHt/Y8JSA9JSCtbwLSchJin0SSclnB",
+	"fl36YMWGHn3L86VjPOnFZo6J6Du0wuoqGjHsCTIi3K4aEiM6jSNdcys8aZja/LLUzCSDLmqSC4VGi71z",
+	"tol+17P9vodO9d9wNp/iEVE0AVQaLYra1RsJlmSTMkmYpIpekufma3KtTnLmJtCHQa5VUM0YmDWdkS2z",
+	"I8ANgkVGiTBD3QCJ8HxOsEBjKiRINlgmhIG8z0VKRDADz4sl/HcZlsq0Bo6dlt5z6bg8+bo7IiyfaSKw",
+	"/7Q7Czho88nC3gFItBFCjfQw86/nDXDBVw2AYZkEcJl/6RljMK08lr69TWOd4FfRrfE1zUg9H2c4AM7X",
+	"ApD5HRGW8JwpIsptMtyjEcBRq7ZeXXGOJ5RhZ/9sA/u4GBlJI9C8zEJfmvR7bDJZBJ9YJh48K/pJGfYq",
+	"FG3Mg67PeNBC13d0tARafjvMJO/JlYnOWoO+367DdgfOWxG5IRKt1EQgUnZWs3OgQ5zRfxNX5bdSv9kH",
+	"47kwId+ZHY3ImAti8oMpZ921nGFXN5Mqd1dwmOXTeQ9dFcaulUG28InOfWL0WrayjrKvw4D14wCG9opC",
+	"78HjUOcCTrDclqYjcZN8eUyERnHNFsZ5lm0qkCvgG4QTwaV0nW3Dt6jGF0zf4xtJla0i4L6DBd5z27+o",
+	"4Y3/414DXKtiupnK9X4aa10GILfp5nAuJVprem1ftb6y9jqXeWQFkXmmIiuZS0P2dzTDyoBre/rD2fbL",
+	"9YWJTmCeQ0Vmncm+DiT/an9HD7U91fjj7MlS9VP6NO3ljP6RE9DlTNy7pcsumnxD1H6WHey/OTMC0i0f",
+	"67uKrqFSneFJmzX4UUtoTgdvQgQnJDS7dv7bjpCm0FAsHcJpa3MiJJXKFJxYoMRYN7fO2TlzfuGi579d",
+	"WX9vqNCWPPByTIKZFmPmWGjBJ1vo/5IkHZ4zI+9bljfDC4QzqSWkJMtTYodZ/DRJzaOcZsqqpXqtTcUz",
+	"IjBTKONYK25GpSwjsNv4wf6bW+dsrFzebBAgQYtXXBMquiqdJp9R8M+5XvBVth2XTOtJC6triNDLPnlz",
+	"1baHVO4zw7uVzxq2LvUGwteRThMiJ4iOi0ui0iyENhi36zzvbkxlZl/qMfvvYjvmMVw/fubIz7Id2Zz2",
+	"UWJoX7VCCe4Xc94ZUSQqd84wM63OBZnZBI5K6xRbR4kguZBarKg3Q9eT31YV7eU3eW03FXsMXzSQbdh4",
+	"zJxDeq9FSta6wbk+DmhneW0fLKtLVo0Z/cqKtNYTqelKsQK791ZMpA2TVq2CTIiCs3XPsGu9W1NGVs6u",
+	"V28rzLQIZCuxLll3ZDjIeIKzg1ZzKwwxxm+InsHCiD6+zpM5t14K0ZFdLrYPmcs5YWmsj+KnoHuiRloq",
+	"UTG68xUqHVC4Trj971HjChq+zuaCTAmT1DYsCvhCrydru7Oym2M9LiLTGOpNRbBo/b8erAeuzPRlXDwm",
+	"BhSrDNRCYa7xrSGzliNbwpdRJvMqrU0ETQ+winDLN4KmKMUKA5+8pDLHGf23Q5S+q+tZehk83NkEIH2P",
+	"BFh4wQPywPGnvY36gnifHkaSlppioLsmeYbFkkU6Q8p8ANHg4VrymYNfRWGv7wnD3xDVUE4rEDLrYR5N",
+	"eE4YNDDu09W11Dw81l6SpQinqUQUvFTWdpubRKXmlq+vDAQex+/92XmopuDWNuNac9vm1Jbx3HmHcA9Y",
+	"0B3cB2HTMahszqNoPT2cEe9R9E3CTYtZOODIg3sc1C3gaI6ldKjhsIky9I/TD+8bjUi2w3bkZP052tlM",
+	"8VKDcmWHVM3ARdkkI8rlOlnyHuNMkpozbozAfwPNiwlTyBAMVGYYO9HYNY52RX25cLe54Wq1vtj5FSW2",
+	"4XSDHef+7WJLtl1frstvb5fqr/djg2i/J48SaMZTsoZdvS2brPLh3gKNIM5e3MDng/hjCMQodZVuUx1O",
+	"YOaHsH2txIpOrvys9XgDcmUTDDXnDthkd6xBMO1TTO73bEA0hFMEMFWb6zcR5C37e+N+Gv39lBi7Q0X+",
+	"ToyBtPCGLWX5u6Mu4d+1KayHx2Y4mOcRInjHUzqmt6MC3/fmQQhhJZkhjTjnoq9W3J3+LoXOO6XPyha/",
+	"P5oyyFwEBvZ7ZxQWalX6PUymNfwwz6Sc/xFQWE3Vh08erai4AiXfmfyetPxV6uSAle0q+ZMivs6K+Pqr",
+	"3y7kmbkGSDfXxAFbN+WCJSvgysMoSx5C2rOpE2GssfpAINBhQ3MBOiM8V8+HsB8RFDge51kWcHbnrS/a",
+	"QDGeuvxkG873l78czuZcKMwUGpEpvqRcyL2//OWcbaJDY0Cw6+mbJ9cJIT5JwdWc1RdMWU78FqDwKQwZ",
+	"4eRiIrTqt4W00PNi55ci4M/G+RnYf3d08DuSHCUZ1dcPoYMzzqjiAnGh/5mQzLj+c7YVAAmwEAxqF0bP",
+	"bN74M2dj35jmM8w2KdtUU7KZce4qW+IMMdjS86Et05XOOWXKnyudzUhKsSLZwjyVP+zsmJxI/SDkQlgW",
+	"pnIZiz0sHs1TjTJPD+fTw7mWD+dwYMk8osjhazrLZ0iShLMU9qjJCw5WL1swnBKncm+cXm1mphjs/fLz",
+	"i52d4WBGmfn3roeEMkUmRNSeRwfW5wd62e/Ng1kUjjEnmAKzNzwtDQphaE7z3Dz5v6zseT0zp9z4ytrf",
+	"PRitd29Y/XKvw7rJMJAObFmSHwwxhnINvQtWpgHVcsGSqeCM5zJbwEPlidXeT+8YJqn4fBNnWbOg43ti",
+	"mgwT+xxmi2qDTOm5cJEXGouWOFV8bnJN7qf7411ZPvvnZN2LgeQ0jCDWtzrXz16W+WuiTCotWsknt4BN",
+	"vlJaQoyd0JKRSDZ6skVX4EwJnkl0FQRtumoJAskpz7PUClABOZUiA3GScAECvuKgSoCGQfRnnPnJWqyr",
+	"AKSknJ0qrMjjNLQWB11FfvjBaQKKI0lU3BvYFBHr5r4PV+AT7Z3xycTmvEmPmHB9pB/NXZHRlPOLtrSR",
+	"E5sqolHADgfxmE5yUXRUrj1YW82pI5/souuWQWLhcokjD1O38z2vnbLtu+QDJ+8TDT8ycj03NQGJHRNJ",
+	"KnEQW1k3wD37S0tiSdh2qhm/ymF/oJlqNdSImVsNPuG1QLTVBSzY7RQKVO22PsXO7wl1o6j7hqi+eNun",
+	"uks4VZ0ZopOq7dGNV/yCsOE5u5rSZKrVLc605DnlVwxxlpAtdKq4IIgqJEmSC5ItYsYzA8y64PzuqnHe",
+	"bK8tY92jvrWf1Zn3PWjMDoiyFry2JGBt/b2ooEV62BbEmQGbhfc3doSjF8B7Ty0+JdFOaewiHKq66XEj",
+	"kvAZkeeM2tiswNZcJi4/9xA1ktR5LLbPbaGgoTM9zXf2eHQTEuwaFVf6JAf1oKQCfcqMfXlaUiDSN9PR",
+	"K2a63XGBUirNf4eik6tLAYUoXPInwFKXkoz68ICPxuqra3vS1TsLCmyv2v69GjnNXPYThfWgMKvqOogJ",
+	"kEFa03UrVDYlOFPTzpa3ZlgknQ3sHniSI0nEJZSzrOkZb+FbX3f6zrDKrHPboj3LyQdTklzYrbszkm6j",
+	"7sRtoQhz3jOiBE1k54EfCz4jakpyuam3ihUdZQTZrwEHrSsbLOP6Avy5R6suvbPr3ri9ELnGs7nmu4P/",
+	"QG9fHR2jFE/yLxohzPKjnGalmgfn7D/Q2b+OXwUDJzifkHPm//D1kghJOfvb+WB3a/fF1s75YAjzfEmx",
+	"In87H/yw88OLzZ3dzZ3ds90f9nZ29nZ2/ud8MJzwL+GXP+yeD76h3XNYsoAtnys6I1+cq/GMzgiSlCXE",
+	"XRj4PMtgVr4JAa789OPPOzvVFVM8+SJyJr9458UXZ/N9n89GRCA+jjs29H/LMigtk4VgtQz7qRE+k+vy",
+	"RXGFM3QG/8s8gA4cRJlJimmAqzRJFKTSiF8aoekAY7SwNNUAh/ncekGqIMCPX833fzsfWPrX+PLDi19/",
+	"7BgNJA+49VPHSDziQpFUj/1rZJ8te6zvSsaP1P35Re1avYXf3/ynqP2fSody5TXr34dL13/dPY9EXdS5",
+	"bcHCPN+iDEExRxvDsJYptXWwA15eMF3LzwHFu9m5ydiCKmcQ+GOPctsmnQHyyi30URJkp3RdJsCjBwzf",
+	"1hAmKdJ/cxFZW9Fa6v9lwFrXAnsGvO+pvl4RvGCuz1yzHQj8S+vvJVyyqBPiUenSO5GqQAhXPq+eztji",
+	"NDfZtI3Ycwgw3K3Cc5Pq/eWzAFBLZfjLrT/sL0v1/KiESmli06OQ4mhMlKl0GqvKr2eKl3M3lxFUdLcX",
+	"NRi6n+6grnsnAcIN34gI70X9sle7vs5F/VqUmbKsumIcjUVpXouhNCFyO+HgcseKi06iby4skuk7mlBp",
+	"KlsFcwYhGRHN4GUxcAW9ge60zWAV0u/gAdE4FF6VxYkOLdJjjiCS50L/ly1u063JFwWPfKkhMzfyk8XQ",
+	"5MT+uKKSUJUoAufJ9BWZFqV+3htka7I1RD/uzIZod9rUUCN1/rw4E96dDu6XyVaP7HFjqcMOlIfdXzsx",
+	"1KsPK+NsgULTxtdO3bA152oVOL8TnhZEnfXiaLm0fahbUaQoFA1FyPU3W+jEyHYS4XRGGRI8I3Gl6KM0",
+	"qYh3dpWwgF6p7RJdgqvZMQhTu/dhy1YI52pKmNIzu6qvP979yq+5GNE0JQxtIlG/qnUyoXttLreY4lDV",
+	"/LtvpIMeDXGUOVM90dNMoPFncDdun2KBpXw+uyuljTay0L+3xCbcf1UTJ3RcEXwBCTlXXKRD5Pzr+h6f",
+	"P5HvvUWOvLQJR2gT6Mu0E3y4XIp+gSMFP4gwE//sbX/V/2frSjZFmZpAQs1iutkLeomZ1pvNXGjBcyFJ",
+	"Nm6KOLVsZznx6COA3DNwFIi7OWr0z0xANhU1uC59VfdmZIGbeRgbS7/I2QbiGXYJit4EA+QyWtguhYcH",
+	"PV/kN0StmC527vctTYtaSE9P1J+clrRG5uigVJUsEGzjzchNXo97dp6V1POelGSmuD0xrV4oLiB7oECo",
+	"XoRs2jqvh1D8xE0ekJs8ydk1xmbrYPWWsLcFkURtOnWuOYr0RI8L2J77AilupfpLnOWkJwuE2fSFHruF",
+	"14wTAoAOuAdihjazuI0fOggRXOP6mgmeDANPUpel+ioDaWBTPix3ORO4+6zSF1duoX24Cc6yRdwY/skt",
+	"uK5+EQtgX3O6P8B1tCdfFYfdEIft/llpVddQKkPQyYQI152uiD26pLicIKR/nuVSoSm+JAhH4tnPGVQy",
+	"M9HiW2i/4CXQ2FGiuenGTFKUS2jiiUYECyJs4lGRBXM1Jcy04fSpFrhoprNh1IY99AyiCq+mX7a2tp49",
+	"h8JhZ0X7LTTi6QKWxVKSNCiChLDJ4/j06u9vP3z455fj/X8dfdg/QIRdUsHZjDB1zi6xoHon5bIxVNpi",
+	"/ST15bbainOdM9973laZQocHsaQoexE3zQ5Zsr1Kqwv97+GljLnwl4DLN2qfq2d2fPkynDRjshwqX45y",
+	"hWZYXJC0KPFJTUmIGUbSXNQUszQjYNKyJ4tMbQX0YmfXOwwhahFc+FOCU5DdrA9f4x8XRdejjmbZd5Yf",
+	"E8hA95AJ08bgHBIrg2vr4h3RdHpvUs5Hhi1ekBRtohmV0oY5OneMSSZ7CNnH0ZlNNks1VFocKVjsvRbj",
+	"CCj/QZVHh7aekxaBp+tQCyv+cpMkF1QtBnu/fS6lVhnSa35sW951Li46Ihtsx7B63EtKNbMb5fC4mnk0",
+	"VjEDtn0Zw9jBiA37k11/baU8A1+XlNcY+fLTfZD7y0iAXs58S/U1DUuPoE80+qaM+BpoahK79377rOWM",
+	"EZY00e+y/YPGB5NBZTCpwoPwJEf7x4dFQmAussHe4KvZ2be97e2vUy7Vt208p9uXPwyGAye0AXJNvcTr",
+	"4vagUSj8uXoWb7lUtlio7Zdt1vwWDwCcKjUPYrDtP/X/AbXqfdnTqdcAdbl1JvUOMzwxDe1tOS2XxlWU",
+	"45VBXKKeNFZYtDSpDXbUM1VjNPUyGZ/IoLFnwYfKC5lGofXFTk2IJ69spMgh1Gv4fdWzOu0KFmvq898y",
+	"X9FOH6TXdJ5X6RKCyauZGMXs9t/1mStKT3BIGxmfUDbUp89zNbTiNSxNtMbxvJhdSyiRucE8UXxQmvzl",
+	"yceDYWFajE7rwsRqMB8foguyaJoae/U/BHFONy/IIjbdJ582bNQimzBiHj6H3WHrPjtloHbXTzWlSp9c",
+	"D8D00MG3z9/+XwAAAP//1c/kLZvfAQA=",
 }
 
 // GetSwagger returns the content of the embedded swagger specification file
diff --git a/api/v2/api.yaml b/api/v2/api.yaml
index 62bc14e54..31d0a0d40 100644
--- a/api/v2/api.yaml
+++ b/api/v2/api.yaml
@@ -2327,6 +2327,49 @@ paths:
               schema:
                 $ref: "#/components/schemas/Error"
 
+  /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec:
+    get:
+      summary: "Get Sub-DAG Run Specification"
+      description: "Returns the YAML specification used for a specific sub-DAG run"
+      operationId: "getSubDAGRunSpec"
+      tags:
+        - "dag-runs"
+      parameters:
+        - $ref: "#/components/parameters/RemoteNode"
+        - $ref: "#/components/parameters/DAGName"
+        - $ref: "#/components/parameters/DAGRunId"
+        - name: "subDAGRunId"
+          in: "path"
+          required: true
+          schema:
+            type: "string"
+          description: "ID of the sub DAG-run to retrieve the spec for"
+      responses:
+        "200":
+          description: "Sub-DAG specification retrieved successfully"
+          content:
+            application/json:
+              schema:
+                type: object
+                required:
+                  - spec
+                properties:
+                  spec:
+                    type: string
+                    description: "YAML specification of the sub-DAG"
+        "404":
+          description: "Sub-DAG run not found"
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+        default:
+          description: "Generic error response"
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+
   /dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/log:
     get:
       summary: "Retrieve log for a specific sub DAG-run"
diff --git a/internal/service/frontend/api/v2/dagruns.go b/internal/service/frontend/api/v2/dagruns.go
index 47be99017..e44361885 100644
--- a/internal/service/frontend/api/v2/dagruns.go
+++ b/internal/service/frontend/api/v2/dagruns.go
@@ -1106,6 +1106,34 @@ func (a *API) GetSubDAGRunDetails(ctx context.Context, request api.GetSubDAGRunD
 	}, nil
 }
 
+// GetSubDAGRunSpec implements api.StrictServerInterface.
+// This endpoint returns the YAML spec that was used for a specific sub-DAG run.
+func (a *API) GetSubDAGRunSpec(ctx context.Context, request api.GetSubDAGRunSpecRequestObject) (api.GetSubDAGRunSpecResponseObject, error) {
+	root := exec.NewDAGRunRef(request.Name, request.DagRunId)
+
+	// Find the sub-DAG run attempt using the existing store method
+	attempt, err := a.dagRunStore.FindSubAttempt(ctx, root, request.SubDAGRunId)
+	if err != nil {
+		return &api.GetSubDAGRunSpec404JSONResponse{
+			Code:    api.ErrorCodeNotFound,
+			Message: fmt.Sprintf("sub dag-run ID %s not found for DAG %s", request.SubDAGRunId, request.Name),
+		}, nil
+	}
+
+	// Read the DAG to get the YamlData field
+	dag, err := attempt.ReadDAG(ctx)
+	if err != nil || dag == nil || len(dag.YamlData) == 0 {
+		return &api.GetSubDAGRunSpec404JSONResponse{
+			Code:    api.ErrorCodeNotFound,
+			Message: fmt.Sprintf("DAG spec not found for sub dag-run %s", request.SubDAGRunId),
+		}, nil
+	}
+
+	return &api.GetSubDAGRunSpec200JSONResponse{
+		Spec: string(dag.YamlData),
+	}, nil
+}
+
 // GetSubDAGRunLog implements api.StrictServerInterface.
 func (a *API) GetSubDAGRunLog(ctx context.Context, request api.GetSubDAGRunLogRequestObject) (api.GetSubDAGRunLogResponseObject, error) {
 	root := exec.NewDAGRunRef(request.Name, request.DagRunId)
diff --git a/ui/src/api/v2/schema.ts b/ui/src/api/v2/schema.ts
index a2bbaf657..e303b2a8a 100644
--- a/ui/src/api/v2/schema.ts
+++ b/ui/src/api/v2/schema.ts
@@ -941,6 +941,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Sub-DAG Run Specification
+         * @description Returns the YAML specification used for a specific sub-DAG run
+         */
+        get: operations["getSubDAGRunSpec"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/log": {
         parameters: {
             query?: never;
@@ -5153,6 +5173,57 @@ export interface operations {
             };
         };
     };
+    getSubDAGRunSpec: {
+        parameters: {
+            query?: {
+                /** @description name of the remote node */
+                remoteNode?: components["parameters"]["RemoteNode"];
+            };
+            header?: never;
+            path: {
+                /** @description name of the DAG */
+                name: components["parameters"]["DAGName"];
+                /** @description ID of the DAG-run or 'latest' to get the most recent DAG-run */
+                dagRunId: components["parameters"]["DAGRunId"];
+                /** @description ID of the sub DAG-run to retrieve the spec for */
+                subDAGRunId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Sub-DAG specification retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description YAML specification of the sub-DAG */
+                        spec: string;
+                    };
+                };
+            };
+            /** @description Sub-DAG run not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Generic error response */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
     getSubDAGRunLog: {
         parameters: {
             query?: {
diff --git a/ui/src/features/dags/components/DAGStatus.tsx b/ui/src/features/dags/components/DAGStatus.tsx
index 749d4fe94..7e457fb04 100644
--- a/ui/src/features/dags/components/DAGStatus.tsx
+++ b/ui/src/features/dags/components/DAGStatus.tsx
@@ -440,9 +440,21 @@ function DAGStatus({ dagRun, fileName }: Props) {
       {activeTab === 'chat' && <ChatHistoryTab dagRun={dagRun} />}
 
       {/* Spec Tab Content */}
-      {activeTab === 'spec' && (
-        <DAGSpecReadOnly dagName={dagRun.name} dagRunId={dagRun.dagRunId} />
-      )}
+      {activeTab === 'spec' && (() => {
+        // Check if this is a sub DAG-run
+        const isSubDAGRun =
+          dagRun.rootDAGRunId &&
+          dagRun.rootDAGRunName &&
+          dagRun.rootDAGRunId !== dagRun.dagRunId;
+
+        return (
+          <DAGSpecReadOnly
+            dagName={isSubDAGRun ? dagRun.rootDAGRunName : dagRun.name}
+            dagRunId={isSubDAGRun ? dagRun.rootDAGRunId : dagRun.dagRunId}
+            subDAGRunId={isSubDAGRun ? dagRun.dagRunId : undefined}
+          />
+        );
+      })()}
 
       <StatusUpdateModal
         visible={modal}
diff --git a/ui/src/features/dags/components/dag-editor/DAGSpecReadOnly.tsx b/ui/src/features/dags/components/dag-editor/DAGSpecReadOnly.tsx
index 27c0456df..f38a65ca9 100644
--- a/ui/src/features/dags/components/dag-editor/DAGSpecReadOnly.tsx
+++ b/ui/src/features/dags/components/dag-editor/DAGSpecReadOnly.tsx
@@ -18,6 +18,8 @@ type DAGSpecReadOnlyProps = {
   dagName: string;
   /** DAG run ID */
   dagRunId: string;
+  /** Optional sub-DAG run ID for viewing subdag specs */
+  subDAGRunId?: string;
   /** Additional class name for the container */
   className?: string;
 };
@@ -52,19 +54,26 @@ function EditorSkeleton({ className }: { className?: string }) {
  * DAGSpecReadOnly fetches and displays a DAG specification in readonly mode
  * with the Schema Documentation sidebar available for reference.
  */
-function DAGSpecReadOnly({ dagName, dagRunId, className }: DAGSpecReadOnlyProps) {
+function DAGSpecReadOnly({ dagName, dagRunId, subDAGRunId, className }: DAGSpecReadOnlyProps) {
   const appBarContext = React.useContext(AppBarContext);
 
-  // Fetch DAG specification data using the dag-runs spec endpoint
-  const { data, isLoading, error } = useQuery('/dag-runs/{name}/{dagRunId}/spec', {
+  // Select endpoint based on whether this is a subdag
+  const endpoint = subDAGRunId
+    ? '/dag-runs/{name}/{dagRunId}/sub-dag-runs/{subDAGRunId}/spec' as const
+    : '/dag-runs/{name}/{dagRunId}/spec' as const;
+
+  // Build path params conditionally
+  const pathParams = subDAGRunId
+    ? { name: dagName, dagRunId: dagRunId, subDAGRunId: subDAGRunId }
+    : { name: dagName, dagRunId: dagRunId };
+
+  // Fetch DAG specification data using the appropriate endpoint
+  const { data, isLoading, error } = useQuery(endpoint, {
     params: {
       query: {
         remoteNode: appBarContext.selectedRemoteNode || 'local',
       },
-      path: {
-        name: dagName,
-        dagRunId: dagRunId,
-      },
+      path: pathParams as any,
     },
   });
 

From 50a86bb3f03cde6abb74d06818c3462344530f4f Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 15:08:36 +0900
Subject: [PATCH 16/19] fix

---
 ui/src/components/ui/toggle-group.tsx | 12 ++++++------
 ui/src/ui/Mermaid.tsx                 |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/ui/toggle-group.tsx b/ui/src/components/ui/toggle-group.tsx
index a7ff50329..506c69bfd 100644
--- a/ui/src/components/ui/toggle-group.tsx
+++ b/ui/src/components/ui/toggle-group.tsx
@@ -9,11 +9,11 @@ type ToggleGroupProps = {
   'aria-label'?: string;
 };
 
-export const ToggleGroup = ({
+export function ToggleGroup({
   children,
   className,
   'aria-label': ariaLabel,
-}: Omit<ToggleGroupProps, 'value' | 'onChange'>) => {
+}: Omit<ToggleGroupProps, 'value' | 'onChange'>): React.ReactElement {
   const groupRef = useRef<HTMLDivElement>(null);
 
   const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
@@ -73,7 +73,7 @@ export const ToggleGroup = ({
       {children}
     </div>
   );
-};
+}
 
 type ToggleButtonProps = {
   value: string;
@@ -85,14 +85,14 @@ type ToggleButtonProps = {
   position?: 'first' | 'middle' | 'last' | 'single';
 };
 
-export const ToggleButton = ({
+export function ToggleButton({
   value,
   groupValue,
   onClick,
   children,
   className,
   'aria-label': ariaLabel,
-}: ToggleButtonProps) => {
+}: ToggleButtonProps): React.ReactElement {
   const isSelected = groupValue === value;
 
   return (
@@ -112,4 +112,4 @@ export const ToggleButton = ({
       {children}
     </button>
   );
-};
+}
diff --git a/ui/src/ui/Mermaid.tsx b/ui/src/ui/Mermaid.tsx
index 2595ccc0d..ccb8d97ab 100644
--- a/ui/src/ui/Mermaid.tsx
+++ b/ui/src/ui/Mermaid.tsx
@@ -11,7 +11,7 @@ type Props = {
 };
 
 // Initialize Mermaid with sepia theme
-const initializeMermaid = () => {
+function initializeMermaid(): void {
   mermaid.initialize({
     securityLevel: 'loose',
     startOnLoad: false,
@@ -46,7 +46,7 @@ const initializeMermaid = () => {
     fontFamily: 'Arial',
     logLevel: 4, // ERROR
   });
-};
+}
 
 // Initialize on load
 initializeMermaid();

From 3a149c06cbf41a08f78ce0f1c65256f17cb44435 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 15:37:54 +0900
Subject: [PATCH 17/19] fix sidebar

---
 ui/index.html             |  2 +-
 ui/src/layouts/Layout.tsx | 22 ++++++++++++++++++++--
 ui/src/menu.tsx           | 17 ++++++++++++++---
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 12843e60b..be776d000 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -17,7 +17,7 @@
         return {
           apiURL: 'http://localhost:8080/api/v2',
           basePath: '',
-          title: 'Test Environment',
+          title: 'Test Environment - production',
           navbarColor: '',
           version: 'dev',
           tz: '',
diff --git a/ui/src/layouts/Layout.tsx b/ui/src/layouts/Layout.tsx
index 9b8f5b631..1ac57d783 100644
--- a/ui/src/layouts/Layout.tsx
+++ b/ui/src/layouts/Layout.tsx
@@ -146,7 +146,16 @@ function Content({ navbarColor, children }: LayoutProps) {
           >
             <Menu className="h-5 w-5" />
           </button>
-          <span className="font-semibold text-sm tracking-tight uppercase opacity-80">
+          <span
+            className={cn(
+              'font-semibold tracking-tight uppercase opacity-80 whitespace-normal leading-tight text-center px-2',
+              (config.title || 'Dagu').length > 20
+                ? 'text-[10px]'
+                : (config.title || 'Dagu').length > 15
+                  ? 'text-[11px]'
+                  : 'text-xs'
+            )}
+          >
             {config.title || 'Dagu'}
           </span>
           <div className="w-8" />
@@ -174,7 +183,16 @@ function Content({ navbarColor, children }: LayoutProps) {
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex justify-between items-center p-4 border-b border-border/10">
-              <span className="font-bold text-lg">
+              <span
+                className={cn(
+                  'font-bold whitespace-normal leading-tight',
+                  (config.title || 'Dagu').length > 20
+                    ? 'text-sm'
+                    : (config.title || 'Dagu').length > 15
+                      ? 'text-base'
+                      : 'text-lg'
+                )}
+              >
                 {config.title || 'Dagu'}
               </span>
               <button
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index 27ba09306..a05b7cb8d 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -125,15 +125,26 @@ export const mainListItems = React.forwardRef<
       >
         {isOpen ? (
           <>
-            <div className="flex-1 flex items-center gap-2 truncate">
+            <div className="flex-1 flex items-center gap-2">
               {!customColor && (
-                <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
+                <div className="w-7 h-7 bg-primary rounded-lg flex-shrink-0 flex items-center justify-center shadow-[0_0_15px_rgba(var(--primary),0.2)]">
                   <span className="text-white font-bold text-sm">
                     {(config.title || 'Dagu').charAt(0).toUpperCase()}
                   </span>
                 </div>
               )}
-              <span className="font-bold tracking-tight text-lg text-sidebar-foreground select-none truncate">
+              <span
+                className={cn(
+                  'font-bold tracking-tight text-sidebar-foreground select-none whitespace-normal leading-tight',
+                  (config.title || 'Dagu').length > 20
+                    ? 'text-xs'
+                    : (config.title || 'Dagu').length > 15
+                      ? 'text-sm'
+                      : (config.title || 'Dagu').length > 10
+                        ? 'text-base'
+                        : 'text-lg'
+                )}
+              >
                 {config.title || 'Dagu'}
               </span>
             </div>

From db3ee205d8a257172b7889e52220c91a1e2444c3 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 15:51:48 +0900
Subject: [PATCH 18/19] refactro

---
 internal/service/frontend/api/v2/dagruns.go   |  54 +++----
 .../service/frontend/api/v2/dagruns_test.go   |  93 +++++++++++
 ui/src/App.tsx                                |   4 +-
 ui/src/components/ui/simple-toast.tsx         |   4 +-
 ui/src/components/ui/switch.css               |   6 +-
 .../dags/components/common/NodeStatusChip.tsx |  47 +-----
 .../dags/components/common/StatusDot.tsx      |  32 +---
 ui/src/layouts/Layout.tsx                     |  13 +-
 ui/src/lib/status-utils.ts                    | 146 ++++++++++++++++++
 ui/src/lib/text-utils.ts                      |  38 +++++
 ui/src/menu.tsx                               |   9 +-
 ui/src/styles/global.css                      |   8 +
 ui/src/ui/Mermaid.tsx                         |  22 ++-
 ui/src/ui/StatusChip.tsx                      |  22 +--
 14 files changed, 345 insertions(+), 153 deletions(-)
 create mode 100644 ui/src/lib/status-utils.ts
 create mode 100644 ui/src/lib/text-utils.ts

diff --git a/internal/service/frontend/api/v2/dagruns.go b/internal/service/frontend/api/v2/dagruns.go
index e44361885..d09f57675 100644
--- a/internal/service/frontend/api/v2/dagruns.go
+++ b/internal/service/frontend/api/v2/dagruns.go
@@ -1048,38 +1048,29 @@ func (a *API) GetDAGRunSpec(ctx context.Context, request api.GetDAGRunSpecReques
 	dagName := request.Name
 	dagRunId := request.DagRunId
 
+	var attempt exec.DAGRunAttempt
+	var err error
+	var notFoundMsg string
+
 	// Handle "latest" by getting the most recent attempt
 	if dagRunId == "latest" {
-		attempt, err := a.dagRunStore.LatestAttempt(ctx, dagName)
-		if err != nil {
-			return &api.GetDAGRunSpec404JSONResponse{
-				Code:    api.ErrorCodeNotFound,
-				Message: fmt.Sprintf("no dag-runs found for DAG %s", dagName),
-			}, nil
-		}
-		dag, err := attempt.ReadDAG(ctx)
-		if err != nil || dag == nil || len(dag.YamlData) == 0 {
-			return &api.GetDAGRunSpec404JSONResponse{
-				Code:    api.ErrorCodeNotFound,
-				Message: fmt.Sprintf("DAG spec not found for %s", dagName),
-			}, nil
-		}
-		return &api.GetDAGRunSpec200JSONResponse{
-			Spec: string(dag.YamlData),
-		}, nil
+		attempt, err = a.dagRunStore.LatestAttempt(ctx, dagName)
+		notFoundMsg = fmt.Sprintf("no dag-runs found for DAG %s", dagName)
+	} else {
+		// Get spec from the specific DAG-run attempt
+		attempt, err = a.dagRunStore.FindAttempt(ctx, exec.NewDAGRunRef(dagName, dagRunId))
+		notFoundMsg = fmt.Sprintf("dag-run ID %s not found for DAG %s", dagRunId, dagName)
 	}
 
-	// Get spec from the specific DAG-run attempt
-	attempt, err := a.dagRunStore.FindAttempt(ctx, exec.NewDAGRunRef(dagName, dagRunId))
 	if err != nil {
 		return &api.GetDAGRunSpec404JSONResponse{
 			Code:    api.ErrorCodeNotFound,
-			Message: fmt.Sprintf("dag-run ID %s not found for DAG %s", dagRunId, dagName),
+			Message: notFoundMsg,
 		}, nil
 	}
 
-	dag, err := attempt.ReadDAG(ctx)
-	if err != nil || dag == nil || len(dag.YamlData) == 0 {
+	spec, err := a.getSpecFromAttempt(ctx, attempt)
+	if err != nil {
 		return &api.GetDAGRunSpec404JSONResponse{
 			Code:    api.ErrorCodeNotFound,
 			Message: fmt.Sprintf("DAG spec not found for dag-run %s", dagRunId),
@@ -1087,7 +1078,7 @@ func (a *API) GetDAGRunSpec(ctx context.Context, request api.GetDAGRunSpecReques
 	}
 
 	return &api.GetDAGRunSpec200JSONResponse{
-		Spec: string(dag.YamlData),
+		Spec: spec,
 	}, nil
 }
 
@@ -1120,9 +1111,8 @@ func (a *API) GetSubDAGRunSpec(ctx context.Context, request api.GetSubDAGRunSpec
 		}, nil
 	}
 
-	// Read the DAG to get the YamlData field
-	dag, err := attempt.ReadDAG(ctx)
-	if err != nil || dag == nil || len(dag.YamlData) == 0 {
+	spec, err := a.getSpecFromAttempt(ctx, attempt)
+	if err != nil {
 		return &api.GetSubDAGRunSpec404JSONResponse{
 			Code:    api.ErrorCodeNotFound,
 			Message: fmt.Sprintf("DAG spec not found for sub dag-run %s", request.SubDAGRunId),
@@ -1130,10 +1120,20 @@ func (a *API) GetSubDAGRunSpec(ctx context.Context, request api.GetSubDAGRunSpec
 	}
 
 	return &api.GetSubDAGRunSpec200JSONResponse{
-		Spec: string(dag.YamlData),
+		Spec: spec,
 	}, nil
 }
 
+// getSpecFromAttempt reads YAML spec from DAG run attempt.
+// Returns spec string and nil error on success, or empty string and error on failure.
+func (a *API) getSpecFromAttempt(ctx context.Context, attempt exec.DAGRunAttempt) (string, error) {
+	dag, err := attempt.ReadDAG(ctx)
+	if err != nil || dag == nil || len(dag.YamlData) == 0 {
+		return "", fmt.Errorf("DAG spec not found")
+	}
+	return string(dag.YamlData), nil
+}
+
 // GetSubDAGRunLog implements api.StrictServerInterface.
 func (a *API) GetSubDAGRunLog(ctx context.Context, request api.GetSubDAGRunLogRequestObject) (api.GetSubDAGRunLogResponseObject, error) {
 	root := exec.NewDAGRunRef(request.Name, request.DagRunId)
diff --git a/internal/service/frontend/api/v2/dagruns_test.go b/internal/service/frontend/api/v2/dagruns_test.go
index 7076eca6b..d31257ea7 100644
--- a/internal/service/frontend/api/v2/dagruns_test.go
+++ b/internal/service/frontend/api/v2/dagruns_test.go
@@ -114,6 +114,99 @@ func TestGetDAGRunSpecInline(t *testing.T) {
 	require.Contains(t, specBody.Spec, "echo inline_dag_test")
 }
 
+func TestGetSubDAGRunSpec(t *testing.T) {
+	server := test.SetupServer(t)
+
+	// Create a parent DAG with an inline sub-DAG definition
+	dagSpec := `steps:
+  - name: call_child
+    call: child_dag
+    params: "MSG=hello"
+
+---
+
+name: child_dag
+params:
+  - MSG
+steps:
+  - name: echo_message
+    command: "echo ${MSG}_from_child"`
+
+	// Create the parent DAG
+	_ = server.Client().Post("/api/v2/dags", api.CreateNewDAGJSONRequestBody{
+		Name: "parent_dag_for_subdag_spec",
+		Spec: &dagSpec,
+	}).ExpectStatus(http.StatusCreated).Send(t)
+
+	// Start the parent DAG
+	startResp := server.Client().Post("/api/v2/dags/parent_dag_for_subdag_spec/start", api.ExecuteDAGJSONRequestBody{}).
+		ExpectStatus(http.StatusOK).Send(t)
+
+	var startBody api.ExecuteDAG200JSONResponse
+	startResp.Unmarshal(t, &startBody)
+	require.NotEmpty(t, startBody.DagRunId)
+
+	// Wait for the parent DAG to complete
+	require.Eventually(t, func() bool {
+		url := fmt.Sprintf("/api/v2/dags/parent_dag_for_subdag_spec/dag-runs/%s", startBody.DagRunId)
+		statusResp := server.Client().Get(url).Send(t)
+		if statusResp.Response.StatusCode() != http.StatusOK {
+			return false
+		}
+
+		var dagRunStatus api.GetDAGDAGRunDetails200JSONResponse
+		statusResp.Unmarshal(t, &dagRunStatus)
+		return dagRunStatus.DagRun.Status == api.Status(core.Succeeded)
+	}, 10*time.Second, 200*time.Millisecond)
+
+	// Get the parent DAG run details to extract sub-DAG run ID
+	detailsResp := server.Client().Get(
+		fmt.Sprintf("/api/v2/dags/parent_dag_for_subdag_spec/dag-runs/%s", startBody.DagRunId),
+	).ExpectStatus(http.StatusOK).Send(t)
+
+	var detailsBody api.GetDAGDAGRunDetails200JSONResponse
+	detailsResp.Unmarshal(t, &detailsBody)
+	require.Len(t, detailsBody.DagRun.Nodes, 1, "Expected 1 node (the call_child step)")
+
+	// Extract the sub-DAG run ID from the call step
+	callNode := detailsBody.DagRun.Nodes[0]
+	require.Equal(t, "call_child", callNode.Step.Name)
+	require.NotNil(t, callNode.SubRuns, "Expected SubRuns to be present")
+	require.Len(t, *callNode.SubRuns, 1, "Expected exactly one sub-DAG run")
+	subDAGRunID := (*callNode.SubRuns)[0].DagRunId
+
+	// Test 1: Fetch the sub-DAG spec successfully
+	subSpecResp := server.Client().Get(
+		fmt.Sprintf("/api/v2/dag-runs/parent_dag_for_subdag_spec/%s/sub-dag-runs/%s/spec",
+			startBody.DagRunId, subDAGRunID),
+	).ExpectStatus(http.StatusOK).Send(t)
+
+	var subSpecBody api.GetSubDAGRunSpec200JSONResponse
+	subSpecResp.Unmarshal(t, &subSpecBody)
+	require.NotEmpty(t, subSpecBody.Spec, "Sub-DAG spec should not be empty")
+	require.Contains(t, subSpecBody.Spec, "child_dag", "Spec should contain child_dag name")
+	require.Contains(t, subSpecBody.Spec, "echo_message", "Spec should contain echo_message step")
+	require.Contains(t, subSpecBody.Spec, "echo ${MSG}_from_child", "Spec should contain the command")
+
+	// Test 2: 404 for non-existent sub-DAG run ID
+	_ = server.Client().Get(
+		fmt.Sprintf("/api/v2/dag-runs/parent_dag_for_subdag_spec/%s/sub-dag-runs/%s/spec",
+			startBody.DagRunId, "non_existent_sub_dag_id"),
+	).ExpectStatus(http.StatusNotFound).Send(t)
+
+	// Test 3: 404 for non-existent parent DAG
+	_ = server.Client().Get(
+		fmt.Sprintf("/api/v2/dag-runs/non_existent_dag/%s/sub-dag-runs/%s/spec",
+			startBody.DagRunId, subDAGRunID),
+	).ExpectStatus(http.StatusNotFound).Send(t)
+
+	// Test 4: 404 for non-existent parent DAG run ID
+	_ = server.Client().Get(
+		fmt.Sprintf("/api/v2/dag-runs/parent_dag_for_subdag_spec/%s/sub-dag-runs/%s/spec",
+			"non_existent_run_id", subDAGRunID),
+	).ExpectStatus(http.StatusNotFound).Send(t)
+}
+
 func TestApproveDAGRunStep(t *testing.T) {
 	server := test.SetupServer(t)
 
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index fa9de13d5..f7c3916ec 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -98,11 +98,11 @@ function AppInner({ config }: Props) {
     const root = document.documentElement;
     if (theme === 'dark') {
       root.classList.add('dark');
-      root.style.backgroundColor = '#020617';
     } else {
       root.classList.remove('dark');
-      root.style.backgroundColor = '#ffffff';
     }
+    // CSS variable from global.css handles background color automatically
+    root.style.backgroundColor = 'var(--background)';
   }, [theme]);
 
   return (
diff --git a/ui/src/components/ui/simple-toast.tsx b/ui/src/components/ui/simple-toast.tsx
index 4999d7b0b..3ce64a7de 100644
--- a/ui/src/components/ui/simple-toast.tsx
+++ b/ui/src/components/ui/simple-toast.tsx
@@ -79,12 +79,10 @@ export const SimpleToast: React.FC<SimpleToastProps> = ({
           backdrop-blur-xl
           rounded-[20px]
           border border-border/50
+          shadow-toast
           transition-all duration-300 ease-out
           ${getAnimationClasses()}
         `}
-        style={{
-          boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
-        }}
       >
         {/* Animated checkmark circle */}
         <div className="relative w-12 h-12">
diff --git a/ui/src/components/ui/switch.css b/ui/src/components/ui/switch.css
index 2ae7763fa..4836ce1ab 100644
--- a/ui/src/components/ui/switch.css
+++ b/ui/src/components/ui/switch.css
@@ -23,7 +23,7 @@
 
 /* Light mode - unchecked */
 .switch-root {
-  background-color: #cbd5e1; /* slate-300 */
+  background-color: var(--muted);
 }
 
 /* Light mode - checked */
@@ -33,7 +33,7 @@
 
 /* Dark mode - unchecked */
 .dark .switch-root {
-  background-color: #334155; /* slate-700 */
+  background-color: var(--muted);
 }
 
 /* Dark mode - checked */
@@ -63,5 +63,5 @@
 
 /* Dark mode thumb */
 .dark .switch-thumb {
-  background-color: #e2e8f0; /* slate-200 */
+  background-color: var(--background);
 }
diff --git a/ui/src/features/dags/components/common/NodeStatusChip.tsx b/ui/src/features/dags/components/common/NodeStatusChip.tsx
index 2ed014218..26b376749 100644
--- a/ui/src/features/dags/components/common/NodeStatusChip.tsx
+++ b/ui/src/features/dags/components/common/NodeStatusChip.tsx
@@ -4,6 +4,7 @@
  * @module features/dags/components/common
  */
 import { cn } from '@/lib/utils';
+import { getStatusClass, getNodeStatusIcon } from '@/lib/status-utils';
 import MatrixText from '@/ui/MatrixText';
 import React, { useEffect, useState } from 'react';
 import { NodeStatus } from '../../../../api/v2/schema';
@@ -39,50 +40,8 @@ type Props = {
  * NodeStatusChip displays a styled badge based on the node status
  */
 function NodeStatusChip({ status, children, size = 'md' }: Props) {
-  // Determine the colors and icon based on status
-  let statusClass = '';
-  let statusIcon = '';
-
-  switch (status) {
-    case NodeStatus.Success:
-      statusClass = 'status-success';
-      statusIcon = '✓';
-      break;
-    case NodeStatus.Failed:
-      statusClass = 'status-failed';
-      statusIcon = '✕';
-      break;
-    case NodeStatus.Rejected:
-      statusClass = 'status-failed';
-      statusIcon = '⊘';
-      break;
-    case NodeStatus.Running:
-      statusClass = 'status-running';
-      break;
-    case NodeStatus.NotStarted:
-      statusClass = 'status-info';
-      statusIcon = '○';
-      break;
-    case NodeStatus.Skipped:
-      statusClass = 'status-info';
-      statusIcon = '―';
-      break;
-    case NodeStatus.PartialSuccess:
-      statusClass = 'status-warning';
-      statusIcon = '◐';
-      break;
-    case NodeStatus.Waiting:
-      statusClass = 'status-warning';
-      statusIcon = '□';
-      break;
-    case NodeStatus.Aborted:
-      statusClass = 'status-warning';
-      statusIcon = '■';
-      break;
-    default:
-      statusClass = 'status-muted';
-      statusIcon = '○';
-  }
+  const statusClass = getStatusClass(status);
+  const statusIcon = getNodeStatusIcon(status);
 
   // Size classes
   const sizeClasses = {
diff --git a/ui/src/features/dags/components/common/StatusDot.tsx b/ui/src/features/dags/components/common/StatusDot.tsx
index 40e8beff5..f4aa2dfd7 100644
--- a/ui/src/features/dags/components/common/StatusDot.tsx
+++ b/ui/src/features/dags/components/common/StatusDot.tsx
@@ -1,4 +1,5 @@
 import { Status } from '@/api/v2/schema';
+import { getStatusColors } from '@/lib/status-utils';
 import React from 'react';
 
 type Props = {
@@ -6,39 +7,12 @@ type Props = {
   statusLabel?: string;
 };
 
-type StatusStyle = {
-  bgColor: string;
-  animation: string;
-};
-
-function getStatusStyle(status: Status): StatusStyle {
-  switch (status) {
-    case Status.Success:
-      return { bgColor: 'bg-success', animation: '' };
-    case Status.Failed:
-    case Status.Rejected:
-      return { bgColor: 'bg-destructive', animation: '' };
-    case Status.Running:
-      return { bgColor: 'bg-primary', animation: 'animate-pulse' };
-    case Status.Queued:
-    case Status.NotStarted:
-      return { bgColor: 'bg-info', animation: '' };
-    case Status.PartialSuccess:
-    case Status.Aborted:
-      return { bgColor: 'bg-warning', animation: '' };
-    case Status.Waiting:
-      return { bgColor: 'bg-warning', animation: 'animate-pulse' };
-    default:
-      return { bgColor: 'bg-muted', animation: '' };
-  }
-}
-
 export function StatusDot({ status, statusLabel }: Props): React.JSX.Element {
-  const { bgColor, animation } = getStatusStyle(status);
+  const { bgClass, animation } = getStatusColors(status);
 
   return (
     <span
-      className={`inline-block w-2 h-2 rounded-full ${bgColor} ${animation}`}
+      className={`inline-block w-2 h-2 rounded-full ${bgClass} ${animation}`}
       title={statusLabel || ''}
     />
   );
diff --git a/ui/src/layouts/Layout.tsx b/ui/src/layouts/Layout.tsx
index 1ac57d783..8debffa72 100644
--- a/ui/src/layouts/Layout.tsx
+++ b/ui/src/layouts/Layout.tsx
@@ -1,5 +1,6 @@
 import { useConfig } from '@/contexts/ConfigContext';
 import { cn } from '@/lib/utils';
+import { getResponsiveTitleClass } from '@/lib/text-utils';
 import { Menu, X } from 'lucide-react';
 import * as React from 'react';
 import { mainListItems as MainListItems } from '../menu';
@@ -149,11 +150,7 @@ function Content({ navbarColor, children }: LayoutProps) {
           <span
             className={cn(
               'font-semibold tracking-tight uppercase opacity-80 whitespace-normal leading-tight text-center px-2',
-              (config.title || 'Dagu').length > 20
-                ? 'text-[10px]'
-                : (config.title || 'Dagu').length > 15
-                  ? 'text-[11px]'
-                  : 'text-xs'
+              getResponsiveTitleClass(config.title || 'Dagu', 'header-mobile')
             )}
           >
             {config.title || 'Dagu'}
@@ -186,11 +183,7 @@ function Content({ navbarColor, children }: LayoutProps) {
               <span
                 className={cn(
                   'font-bold whitespace-normal leading-tight',
-                  (config.title || 'Dagu').length > 20
-                    ? 'text-sm'
-                    : (config.title || 'Dagu').length > 15
-                      ? 'text-base'
-                      : 'text-lg'
+                  getResponsiveTitleClass(config.title || 'Dagu', 'sidebar-mobile')
                 )}
               >
                 {config.title || 'Dagu'}
diff --git a/ui/src/lib/status-utils.ts b/ui/src/lib/status-utils.ts
new file mode 100644
index 000000000..66e0609c4
--- /dev/null
+++ b/ui/src/lib/status-utils.ts
@@ -0,0 +1,146 @@
+import { NodeStatus, Status } from '@/api/v2/schema';
+
+/**
+ * Get Tailwind CSS utility class for Status or NodeStatus enum.
+ * Uses utility classes defined in global.css (lines 280-297).
+ *
+ * @param status - The Status or NodeStatus enum value
+ * @returns The corresponding CSS utility class name
+ */
+export function getStatusClass(status?: Status | NodeStatus): string {
+  switch (status) {
+    case Status.Success:
+    case NodeStatus.Success:
+      return 'status-success';
+
+    case Status.Failed:
+    case Status.Rejected:
+    case NodeStatus.Failed:
+    case NodeStatus.Rejected:
+      return 'status-failed';
+
+    case Status.Running:
+    case NodeStatus.Running:
+      return 'status-running';
+
+    case Status.Queued:
+    case Status.NotStarted:
+    case NodeStatus.NotStarted:
+      return 'status-info';
+
+    case NodeStatus.Skipped:
+      return 'status-info';
+
+    case Status.PartialSuccess:
+    case Status.Waiting:
+    case Status.Aborted:
+    case NodeStatus.PartialSuccess:
+    case NodeStatus.Waiting:
+    case NodeStatus.Aborted:
+      return 'status-warning';
+
+    default:
+      return 'status-muted';
+  }
+}
+
+/**
+ * Get separate background, text, border, and animation classes for status.
+ * Useful for components that need granular control over styling.
+ *
+ * @param status - The Status or NodeStatus enum value
+ * @returns Object with bgClass, textClass, borderClass, and animation
+ */
+export function getStatusColors(
+  status?: Status | NodeStatus
+): {
+  bgClass: string;
+  textClass: string;
+  borderClass: string;
+  animation: string;
+} {
+  const baseClass = getStatusClass(status);
+  const isRunning = status === Status.Running || status === NodeStatus.Running;
+  const isWaiting = status === Status.Waiting || status === NodeStatus.Waiting;
+
+  switch (baseClass) {
+    case 'status-success':
+      return {
+        bgClass: 'bg-success',
+        textClass: 'text-success',
+        borderClass: 'border-success',
+        animation: '',
+      };
+
+    case 'status-failed':
+      return {
+        bgClass: 'bg-destructive',
+        textClass: 'text-destructive',
+        borderClass: 'border-destructive',
+        animation: '',
+      };
+
+    case 'status-running':
+      return {
+        bgClass: 'bg-primary',
+        textClass: 'text-primary',
+        borderClass: 'border-primary',
+        animation: 'animate-pulse',
+      };
+
+    case 'status-info':
+      return {
+        bgClass: 'bg-info',
+        textClass: 'text-info',
+        borderClass: 'border-info',
+        animation: '',
+      };
+
+    case 'status-warning':
+      return {
+        bgClass: 'bg-warning',
+        textClass: 'text-warning',
+        borderClass: 'border-warning',
+        animation: isWaiting ? 'animate-pulse' : '',
+      };
+
+    default:
+      return {
+        bgClass: 'bg-muted',
+        textClass: 'text-muted-foreground',
+        borderClass: 'border-muted-foreground',
+        animation: '',
+      };
+  }
+}
+
+/**
+ * Get the display icon for a NodeStatus value.
+ *
+ * @param status - The NodeStatus enum value
+ * @returns Unicode character representing the status
+ */
+export function getNodeStatusIcon(status: NodeStatus): string {
+  switch (status) {
+    case NodeStatus.Success:
+      return '✓';
+    case NodeStatus.Failed:
+      return '✕';
+    case NodeStatus.Rejected:
+      return '⊘';
+    case NodeStatus.NotStarted:
+      return '○';
+    case NodeStatus.Skipped:
+      return '―';
+    case NodeStatus.PartialSuccess:
+      return '◐';
+    case NodeStatus.Waiting:
+      return '□';
+    case NodeStatus.Aborted:
+      return '■';
+    case NodeStatus.Running:
+      return ''; // Running uses BrailleSpinner
+    default:
+      return '○';
+  }
+}
diff --git a/ui/src/lib/text-utils.ts b/ui/src/lib/text-utils.ts
new file mode 100644
index 000000000..65e68704a
--- /dev/null
+++ b/ui/src/lib/text-utils.ts
@@ -0,0 +1,38 @@
+/**
+ * Get responsive text size class based on string length.
+ * Used for titles in headers and sidebars to ensure they fit properly.
+ *
+ * @param text - The text to measure
+ * @param variant - The context where the text will be displayed
+ * @returns Tailwind CSS text size class
+ */
+export function getResponsiveTitleClass(
+  text: string,
+  variant: 'sidebar-expanded' | 'sidebar-mobile' | 'header-mobile' = 'sidebar-expanded'
+): string {
+  const length = text.length;
+
+  switch (variant) {
+    case 'sidebar-expanded':
+      // Desktop sidebar (menu.tsx)
+      if (length > 20) return 'text-xs';
+      if (length > 15) return 'text-sm';
+      if (length > 10) return 'text-base';
+      return 'text-lg';
+
+    case 'sidebar-mobile':
+      // Mobile sidebar (Layout.tsx)
+      if (length > 20) return 'text-sm';
+      if (length > 15) return 'text-base';
+      return 'text-lg';
+
+    case 'header-mobile':
+      // Mobile header (Layout.tsx)
+      if (length > 20) return 'text-[10px]';
+      if (length > 15) return 'text-[11px]';
+      return 'text-xs';
+
+    default:
+      return 'text-base';
+  }
+}
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index a05b7cb8d..512ec06e4 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -9,6 +9,7 @@ import { UserMenu } from '@/components/UserMenu';
 import { useIsAdmin } from '@/contexts/AuthContext';
 import { useConfig } from '@/contexts/ConfigContext';
 import { cn } from '@/lib/utils';
+import { getResponsiveTitleClass } from '@/lib/text-utils';
 import {
   Activity,
   BarChart2,
@@ -136,13 +137,7 @@ export const mainListItems = React.forwardRef<
               <span
                 className={cn(
                   'font-bold tracking-tight text-sidebar-foreground select-none whitespace-normal leading-tight',
-                  (config.title || 'Dagu').length > 20
-                    ? 'text-xs'
-                    : (config.title || 'Dagu').length > 15
-                      ? 'text-sm'
-                      : (config.title || 'Dagu').length > 10
-                        ? 'text-base'
-                        : 'text-lg'
+                  getResponsiveTitleClass(config.title || 'Dagu', 'sidebar-expanded')
                 )}
               >
                 {config.title || 'Dagu'}
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
index d8c062ca1..a68b80426 100644
--- a/ui/src/styles/global.css
+++ b/ui/src/styles/global.css
@@ -296,6 +296,14 @@
   @apply bg-muted text-muted-foreground border border-muted-foreground/20;
 }
 
+/* Toast Shadow Utility */
+.shadow-toast {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.dark .shadow-toast {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
 /* Obsidian Card Utility - Unified containers */
 .card-obsidian {
   @apply bg-card border border-border rounded-xl overflow-hidden;
diff --git a/ui/src/ui/Mermaid.tsx b/ui/src/ui/Mermaid.tsx
index ccb8d97ab..807d2d045 100644
--- a/ui/src/ui/Mermaid.tsx
+++ b/ui/src/ui/Mermaid.tsx
@@ -10,7 +10,15 @@ type Props = {
   onRightClick?: (id: string) => void;
 };
 
-// Initialize Mermaid with sepia theme
+// Helper function to get computed CSS variable value
+function getCSSVariable(name: string): string {
+  if (typeof window === 'undefined') return '#000000';
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+}
+
+// Initialize Mermaid with theme-aware colors
 function initializeMermaid(): void {
   mermaid.initialize({
     securityLevel: 'loose',
@@ -19,15 +27,15 @@ function initializeMermaid(): void {
     theme: 'default',
     themeVariables: {
       background: 'transparent',
-      primaryColor: '#faf8f5', // card
-      primaryTextColor: '#3d3833', // foreground
-      primaryBorderColor: '#c8bfb0', // border
-      lineColor: '#6b635a', // muted-foreground
+      primaryColor: getCSSVariable('--card'),
+      primaryTextColor: getCSSVariable('--foreground'),
+      primaryBorderColor: getCSSVariable('--border'),
+      lineColor: getCSSVariable('--muted-foreground'),
       sectionBkgColor: 'transparent',
       altSectionBkgColor: 'transparent',
       gridColor: 'transparent',
-      secondaryColor: '#f0ebe3', // secondary
-      tertiaryColor: '#f5f0e8', // background
+      secondaryColor: getCSSVariable('--secondary'),
+      tertiaryColor: getCSSVariable('--background'),
     },
     flowchart: {
       curve: 'basis',
diff --git a/ui/src/ui/StatusChip.tsx b/ui/src/ui/StatusChip.tsx
index 0cc7d98ce..d7bb29d93 100644
--- a/ui/src/ui/StatusChip.tsx
+++ b/ui/src/ui/StatusChip.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils';
+import { getStatusClass } from '@/lib/status-utils';
 import React from 'react';
 import { Status } from '../api/v2/schema';
 import MatrixText from './MatrixText';
@@ -9,27 +10,6 @@ type Props = {
   size?: 'xs' | 'sm' | 'md' | 'lg'; // Size variants
 };
 
-function getStatusClass(status?: Status): string {
-  switch (status) {
-    case Status.Success:
-      return 'status-success';
-    case Status.Failed:
-    case Status.Rejected:
-      return 'status-failed';
-    case Status.Running:
-      return 'status-running';
-    case Status.Queued:
-    case Status.NotStarted:
-      return 'status-info';
-    case Status.PartialSuccess:
-    case Status.Waiting:
-    case Status.Aborted:
-      return 'status-warning';
-    default:
-      return 'status-muted';
-  }
-}
-
 function StatusChip({
   status,
   children,

From bd7796bfbb0f8ea460b9f8c320f62ab8fbcb9936 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 18 Jan 2026 16:07:06 +0900
Subject: [PATCH 19/19] fix bug

---
 ui/index.html         |  2 +-
 ui/src/menu.tsx       | 29 +++++++++++++++++++++++++----
 ui/src/ui/Mermaid.tsx | 21 +++++++++++----------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index be776d000..12843e60b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -17,7 +17,7 @@
         return {
           apiURL: 'http://localhost:8080/api/v2',
           basePath: '',
-          title: 'Test Environment - production',
+          title: 'Test Environment',
           navbarColor: '',
           version: 'dev',
           tz: '',
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index 512ec06e4..c2488041a 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -39,6 +39,7 @@ type NavItemProps = {
   text: string;
   isOpen: boolean;
   onClick?: () => void;
+  customColor?: boolean;
 };
 
 // Main List Items Props
@@ -50,7 +51,7 @@ type MainListItemsProps = {
 };
 
 // NavItem component with Obsidian Deep styling
-function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
+function NavItem({ to, icon, text, isOpen, onClick, customColor }: NavItemProps) {
   const location = useLocation();
   const isActive =
     location.pathname === to ||
@@ -65,20 +66,29 @@ function NavItem({ to, icon, text, isOpen, onClick }: NavItemProps) {
           'flex items-center rounded-lg transition-all duration-200 ease-in-out px-2 group relative',
           isOpen ? 'h-9 w-full gap-3' : 'h-10 w-10 justify-center',
           isActive
-            ? 'text-foreground bg-primary/10 shadow-[0_0_15px_rgba(var(--primary-rgb),0.15),inset_0_0_0_1px_rgba(var(--primary-rgb),0.3)]'
+            ? customColor
+              ? 'text-foreground bg-white/10 shadow-[0_0_15px_rgba(255,255,255,0.1),inset_0_0_0_1px_rgba(255,255,255,0.2)]'
+              : 'text-foreground bg-primary/10 shadow-[0_0_15px_rgba(var(--primary-rgb),0.15),inset_0_0_0_1px_rgba(var(--primary-rgb),0.3)]'
             : 'text-sidebar-foreground hover:text-foreground hover:bg-white/5'
         )}
         aria-current={isActive ? 'page' : undefined}
         title={isOpen ? '' : text}
       >
         {isActive && (
-          <div className="absolute left-0 w-1 h-4 bg-primary rounded-r-full shadow-[0_0_8px_var(--primary)]" />
+          <div className={cn(
+            'absolute left-0 w-1 h-4 rounded-r-full',
+            customColor
+              ? 'bg-white shadow-[0_0_8px_rgba(255,255,255,0.4)]'
+              : 'bg-primary shadow-[0_0_8px_var(--primary)]'
+          )} />
         )}
         <div
           className={cn(
             'transition-transform duration-200 flex items-center justify-center',
             isActive
-              ? 'text-primary scale-110'
+              ? customColor
+                ? 'text-white scale-110'
+                : 'text-primary scale-110'
               : 'opacity-70 group-hover:opacity-100 group-hover:scale-105'
           )}
         >
@@ -242,6 +252,7 @@ export const mainListItems = React.forwardRef<
               icon={<BarChart2 size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
+              customColor={customColor}
             />
             {isAdmin && (
               <NavItem
@@ -250,6 +261,7 @@ export const mainListItems = React.forwardRef<
                 icon={<Activity size={18} />}
                 isOpen={isOpen}
                 onClick={onNavItemClick}
+                customColor={customColor}
               />
             )}
           </div>
@@ -266,6 +278,7 @@ export const mainListItems = React.forwardRef<
               icon={<Inbox size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
+              customColor={customColor}
             />
             <NavItem
               to="/dag-runs"
@@ -273,6 +286,7 @@ export const mainListItems = React.forwardRef<
               icon={<History size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
+              customColor={customColor}
             />
             <NavItem
               to="/dags"
@@ -280,6 +294,7 @@ export const mainListItems = React.forwardRef<
               icon={<Network size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
+              customColor={customColor}
             />
             <NavItem
               to="/search"
@@ -287,6 +302,7 @@ export const mainListItems = React.forwardRef<
               icon={<Search size={18} />}
               isOpen={isOpen}
               onClick={onNavItemClick}
+              customColor={customColor}
             />
           </div>
 
@@ -303,6 +319,7 @@ export const mainListItems = React.forwardRef<
                 icon={<Users size={18} />}
                 isOpen={isOpen}
                 onClick={onNavItemClick}
+                customColor={customColor}
               />
               <NavItem
                 to="/api-keys"
@@ -310,6 +327,7 @@ export const mainListItems = React.forwardRef<
                 icon={<KeyRound size={18} />}
                 isOpen={isOpen}
                 onClick={onNavItemClick}
+                customColor={customColor}
               />
               <NavItem
                 to="/webhooks"
@@ -317,6 +335,7 @@ export const mainListItems = React.forwardRef<
                 icon={<Webhook size={18} />}
                 isOpen={isOpen}
                 onClick={onNavItemClick}
+                customColor={customColor}
               />
               {config.terminalEnabled && (
                 <NavItem
@@ -325,6 +344,7 @@ export const mainListItems = React.forwardRef<
                   icon={<Terminal size={18} />}
                   isOpen={isOpen}
                   onClick={onNavItemClick}
+                  customColor={customColor}
                 />
               )}
               <NavItem
@@ -333,6 +353,7 @@ export const mainListItems = React.forwardRef<
                 icon={<ScrollText size={18} />}
                 isOpen={isOpen}
                 onClick={onNavItemClick}
+                customColor={customColor}
               />
             </div>
           )}
diff --git a/ui/src/ui/Mermaid.tsx b/ui/src/ui/Mermaid.tsx
index 807d2d045..adb616a33 100644
--- a/ui/src/ui/Mermaid.tsx
+++ b/ui/src/ui/Mermaid.tsx
@@ -10,12 +10,13 @@ type Props = {
   onRightClick?: (id: string) => void;
 };
 
-// Helper function to get computed CSS variable value
-function getCSSVariable(name: string): string {
-  if (typeof window === 'undefined') return '#000000';
-  return getComputedStyle(document.documentElement)
+// Helper function to get computed CSS variable value with fallback
+function getCSSVariable(name: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  const value = getComputedStyle(document.documentElement)
     .getPropertyValue(name)
     .trim();
+  return value || fallback;
 }
 
 // Initialize Mermaid with theme-aware colors
@@ -27,15 +28,15 @@ function initializeMermaid(): void {
     theme: 'default',
     themeVariables: {
       background: 'transparent',
-      primaryColor: getCSSVariable('--card'),
-      primaryTextColor: getCSSVariable('--foreground'),
-      primaryBorderColor: getCSSVariable('--border'),
-      lineColor: getCSSVariable('--muted-foreground'),
+      primaryColor: getCSSVariable('--card', '#faf8f5'),
+      primaryTextColor: getCSSVariable('--foreground', '#3d3833'),
+      primaryBorderColor: getCSSVariable('--border', '#c8bfb0'),
+      lineColor: getCSSVariable('--muted-foreground', '#6b635a'),
       sectionBkgColor: 'transparent',
       altSectionBkgColor: 'transparent',
       gridColor: 'transparent',
-      secondaryColor: getCSSVariable('--secondary'),
-      tertiaryColor: getCSSVariable('--background'),
+      secondaryColor: getCSSVariable('--secondary', '#f0ebe3'),
+      tertiaryColor: getCSSVariable('--background', '#f5f0e8'),
     },
     flowchart: {
       curve: 'basis',
