diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed982813da..9a2978aa53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -717,8 +717,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.44.0
-        version: 0.44.0(@internationalized/date@3.8.2)(svelte@5.43.0)
+        specifier: ^0.45.1
+        version: 0.45.1(svelte@5.43.0)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -2820,8 +2820,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.44.0':
-    resolution: {integrity: sha512-APlSvNdaHNyD20hncJH5d0TDS1eGMhn0XeTr01UdR02FJvlfBBIEHCug0LG57p3pWZecbow2JjtU2GBhNDQb6g==}
+  '@immich/ui@0.45.1':
+    resolution: {integrity: sha512-LanpfRI7cJLXExRxaYd4xMRvq/SWZlHmBhSsw56l0aAI6Mltm+IcFMD6LF+jvSzGOSLGLcNxIAYsqqWAPmn8+g==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -2964,8 +2964,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@internationalized/date@3.8.2':
-    resolution: {integrity: sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==}
+  '@internationalized/date@3.10.0':
+    resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
 
   '@ioredis/commands@1.4.0':
     resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
@@ -14438,11 +14438,12 @@ snapshots:
     dependencies:
       svelte: 5.43.0
 
-  '@immich/ui@0.44.0(@internationalized/date@3.8.2)(svelte@5.43.0)':
+  '@immich/ui@0.45.1(svelte@5.43.0)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.43.0)
+      '@internationalized/date': 3.10.0
       '@mdi/js': 7.4.47
-      bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.43.0)
+      bits-ui: 2.9.8(@internationalized/date@3.10.0)(svelte@5.43.0)
       luxon: 3.7.2
       simple-icons: 15.18.0
       svelte: 5.43.0
@@ -14450,8 +14451,6 @@ snapshots:
       tailwind-merge: 3.3.1
       tailwind-variants: 3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.16)
       tailwindcss: 4.1.16
-    transitivePeerDependencies:
-      - '@internationalized/date'
 
   '@inquirer/checkbox@4.2.1(@types/node@22.19.1)':
     dependencies:
@@ -14591,7 +14590,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.1
 
-  '@internationalized/date@3.8.2':
+  '@internationalized/date@3.10.0':
     dependencies:
       '@swc/helpers': 0.5.17
 
@@ -17380,11 +17379,11 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@2.9.8(@internationalized/date@3.8.2)(svelte@5.43.0):
+  bits-ui@2.9.8(@internationalized/date@3.10.0)(svelte@5.43.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
-      '@internationalized/date': 3.8.2
+      '@internationalized/date': 3.10.0
       esm-env: 1.2.2
       runed: 0.29.2(svelte@5.43.0)
       svelte: 5.43.0
diff --git a/web/package.json b/web/package.json
index a463b4fe0d..7ce7c7529d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.44.0",
+    "@immich/ui": "^0.45.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",
diff --git a/web/src/lib/components/workflow/schema-form/SchemaFormFields.svelte b/web/src/lib/components/workflow/schema-form/SchemaFormFields.svelte
index 9be98dc72f..b7879ebacf 100644
--- a/web/src/lib/components/workflow/schema-form/SchemaFormFields.svelte
+++ b/web/src/lib/components/workflow/schema-form/SchemaFormFields.svelte
@@ -241,7 +241,7 @@
       {@const label = component.title || component.label || key}
 
       <div
-        class="flex flex-col gap-1 bg-gray-100 dark:bg-subtle border border-gray-200 dark:border-gray-700 p-4 rounded-xl"
+        class="flex flex-col gap-1 bg-light dark:bg-black/50 border border-gray-200 dark:border-gray-700 p-4 rounded-xl"
       >
         <!-- Select component -->
         {#if component.type === 'select'}
diff --git a/web/src/routes/(user)/utilities/workflows/edit/[workflowId]/+page.svelte b/web/src/routes/(user)/utilities/workflows/edit/[workflowId]/+page.svelte
index 65c0507f8f..e608b992e2 100644
--- a/web/src/routes/(user)/utilities/workflows/edit/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/edit/[workflowId]/+page.svelte
@@ -3,7 +3,6 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SchemaFormFields from '$lib/components/workflow/schema-form/SchemaFormFields.svelte';
   import WorkflowCardConnector from '$lib/components/workflows/workflow-card-connector.svelte';
-  import WorkflowSummarySidebar from '$lib/components/workflows/workflow-summary-sidebar.svelte';
   import WorkflowTriggerCard from '$lib/components/workflows/workflow-trigger-card.svelte';
   import type { PluginActionResponseDto, PluginFilterResponseDto } from '@immich/sdk';
   import {
@@ -131,8 +130,29 @@
   };
 </script>
 
+{#snippet cardOrder(index: number)}
+  <div
+    class="h-8 w-8 rounded-lg borderflex place-items-center place-content-center shrink-0 border dark:border-gray-500"
+  >
+    <p class="font-mono text-sm font-bold">
+      {index + 1}
+    </p>
+  </div>
+{/snippet}
+
+{#snippet stepSeparator()}
+  <div class="relative flex justify-center py-4">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t-2 border-dashed border-gray-300 dark:border-gray-700"></div>
+    </div>
+    <div class="relative flex justify-center text-xs uppercase">
+      <span class="bg-white dark:bg-black px-2 font-semibold text-gray-500">THEN</span>
+    </div>
+  </div>
+{/snippet}
+
 <UserPageLayout title={data.meta.title} scrollbar={false}>
-  <WorkflowSummarySidebar trigger={selectedTrigger} filters={orderedFilters} actions={orderedActions} />
+  <!-- <WorkflowSummarySidebar trigger={selectedTrigger} filters={orderedFilters} actions={orderedActions} /> -->
 
   {#snippet buttons()}
     <HStack gap={4} class="me-4">
@@ -181,7 +201,7 @@
       <div class="my-10 h-px w-[98%] bg-gray-200 dark:bg-gray-700"></div>
 
       <Card expandable expanded={true}>
-        <CardHeader class="bg-indigo-50 dark:bg-primary/20">
+        <CardHeader class="bg-indigo-50 dark:bg-primary-800">
           <div class="flex items-start gap-3">
             <Icon icon={mdiFlashOutline} size="20" class="mt-1 text-primary" />
             <div class="flex flex-col">
@@ -206,7 +226,7 @@
 
       <WorkflowCardConnector />
 
-      <Card expandable expanded={false}>
+      <Card expandable expanded={true}>
         <CardHeader class="bg-amber-50 dark:bg-[#5e4100]">
           <div class="flex items-start gap-3">
             <Icon icon={mdiFilterOutline} size="20" class="mt-1 text-warning" />
@@ -225,14 +245,7 @@
 
           {#each orderedFilters as filter, index (filter.id)}
             {#if index > 0}
-              <div class="relative flex justify-center py-4">
-                <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div class="w-full border-t-2 border-dashed border-muted"></div>
-                </div>
-                <div class="relative flex justify-center text-xs uppercase">
-                  <span class="bg-white dark:bg-gray-900 px-2 font-semibold">THEN</span>
-                </div>
-              </div>
+              {@render stepSeparator()}
             {/if}
             <div
               use:dragAndDrop={{
@@ -244,14 +257,10 @@
                 isDragging: draggedFilterIndex === index,
                 isDragOver: dragOverFilterIndex === index,
               }}
-              class="mb-4 cursor-move rounded-lg border-2 p-4 transition-all bg-gray-50 dark:bg-gray-950/20 border-dashed border-transparent hover:border-gray-300 dark:hover:border-gray-600"
+              class="mb-4 cursor-move rounded-lg border-2 p-4 transition-all bg-gray-50 dark:bg-subtle border-dashed border-transparent hover:border-gray-300 dark:hover:border-gray-600"
             >
               <div class="flex items-start gap-4">
-                <div class="h-8 w-8 rounded-lg borderflex place-items-center place-content-center shrink-0 border">
-                  <p class="font-mono text-sm font-bold">
-                    {index + 1}
-                  </p>
-                </div>
+                {@render cardOrder(index)}
                 <div class="flex-1">
                   <h1 class="font-bold text-lg mb-3">{filter.title}</h1>
                   <SchemaFormFields schema={filter.schema} bind:config={filterConfigs} configKey={filter.methodName} />
@@ -265,7 +274,7 @@
 
       <WorkflowCardConnector />
 
-      <Card expandable>
+      <Card expandable expanded>
         <CardHeader class="bg-success/10 dark:bg-teal-950">
           <div class="flex items-start gap-3">
             <Icon icon={mdiPlayCircleOutline} size="20" class="mt-1 text-success" />
@@ -284,14 +293,7 @@
 
           {#each orderedActions as action, index (action.id)}
             {#if index > 0}
-              <div class="relative flex justify-center py-4">
-                <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div class="w-full border-t-2 border-dashed border-muted"></div>
-                </div>
-                <div class="relative flex justify-center text-xs uppercase">
-                  <span class="bg-white dark:bg-gray-900 px-2 font-semibold">THEN</span>
-                </div>
-              </div>
+              {@render stepSeparator()}
             {/if}
             <div
               use:dragAndDrop={{
@@ -303,14 +305,10 @@
                 isDragging: draggedActionIndex === index,
                 isDragOver: dragOverActionIndex === index,
               }}
-              class="mb-4 cursor-move rounded-lg border-2 p-4 transition-all bg-gray-50 dark:bg-gray-950/20 border-dashed border-transparent hover:border-gray-300 dark:hover:border-gray-600"
+              class="mb-4 cursor-move rounded-lg border-2 p-4 transition-all bg-gray-50 dark:bg-subtle border-dashed border-transparent hover:border-gray-300 dark:hover:border-gray-600"
             >
               <div class="flex items-start gap-4">
-                <div class="h-8 w-8 rounded-lg borderflex place-items-center place-content-center shrink-0 border">
-                  <p class="font-mono text-sm font-bold">
-                    {index + 1}
-                  </p>
-                </div>
+                {@render cardOrder(index)}
                 <div class="flex-1">
                   <h1 class="font-bold text-lg mb-3">{action.title}</h1>
                   <SchemaFormFields schema={action.schema} bind:config={actionConfigs} configKey={action.methodName} />