diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index f4eaf6372b..c8b8ff8897 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -9,15 +9,11 @@
     mdiArchiveArrowDownOutline,
     mdiHeartMultiple,
     mdiHeartMultipleOutline,
-    mdiHomeAutomation,
     mdiImageAlbum,
     mdiImageMultiple,
     mdiImageMultipleOutline,
     mdiMagnify,
     mdiMap,
-    mdiPageLayoutSidebarLeft,
-    mdiSettingsHelper,
-    mdiSlide,
     mdiTrashCanOutline,
     mdiTuneVariant,
   } from '@mdi/js';
diff --git a/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte
index 966537a980..7fefa004d3 100644
--- a/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte
+++ b/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class="bg-gray-800 text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
+  class="bg-zinc-300 dark:bg-zinc-800 text-black dark:text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
 >
   <p class="col-start-2 col-span-1">Add to album "RANDOM"</p>
 
diff --git a/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte
index 7d9a522eda..72a256b2e6 100644
--- a/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte
+++ b/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class="bg-gray-700 text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
+  class="bg-zinc-200 text-black dark:bg-zinc-700 dark:text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
 >
   <p class="col-start-2 col-span-1">And has Alex and Henry and Nate</p>
 
diff --git a/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte
index a270733a39..14981de819 100644
--- a/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte
+++ b/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte
@@ -1,5 +1,5 @@
 <div
-  class="dark:bg-immich-dark-primary text-black min-h-[60px] flex place-items-center place-content-center mx-4 mt-2 rounded-2xl"
+  class="bg-immich-primary text-white dark:bg-immich-dark-primary dark:text-black min-h-[60px] flex place-items-center place-content-center mx-4 mt-2 rounded-2xl"
 >
   When an asset is uploaded
 </div>
diff --git a/web/src/lib/components/workflow-page/workflow-card.svelte b/web/src/lib/components/workflow-page/workflow-card.svelte
index 0f01ef35d3..100083d9d4 100644
--- a/web/src/lib/components/workflow-page/workflow-card.svelte
+++ b/web/src/lib/components/workflow-page/workflow-card.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="rounded-3xl mr-2 my-4 min-h-[60px] grid grid-cols-[32px_1fr] gap-2 place-items-center p-4 place-content-center dark:bg-gray-900 hover:dark:bg-gray-800"
+  class="rounded-3xl mr-2 my-4 min-h-[60px] grid grid-cols-[32px_1fr] gap-2 place-items-center p-4 place-content-center bg-gray-100 hover:bg-gray-200 dark:bg-gray-900 hover:dark:bg-gray-800"
 >
   <div class="w-4 h-4 rounded-full bg-green-400"></div>
   <p class="dark:text-gray-300">Add this photo to every albums and notify everybody about this glorious asset</p>
diff --git a/web/src/lib/components/workflow-page/workflow-editor.svelte b/web/src/lib/components/workflow-page/workflow-editor.svelte
index 8bd5c87b3e..4d39ae2f06 100644
--- a/web/src/lib/components/workflow-page/workflow-editor.svelte
+++ b/web/src/lib/components/workflow-page/workflow-editor.svelte
@@ -7,12 +7,12 @@
   import { mdiPlus } from '@mdi/js';
 </script>
 
-<section class="h-full">
+<section class="h-full overflow-scroll">
   <div
     id="workflow-control-bar"
-    class="flex justify-between place-items-center border-b border-gray-800 p-4 bg-zinc-900"
+    class="sticky top-0 flex justify-between place-items-center border-b border-gray-200 dark:border-gray-800 p-4 bg-zinc-50 dark:bg-zinc-900 z-20"
   >
-    <p class="uppercase text-lg dark:text-white">
+    <p class="uppercase text-lg dark:text-white font-medium">
       Add this photo to every albums and notify everybody about this glorious asset
     </p>
 
@@ -26,19 +26,23 @@
   <div id="workflows-selection">
     <!-- TRIGGER BLOCK -->
     <div class="translate-y-3">
-      <p class="pl-4 text-sm dark:text-gray-300">TRIGGER</p>
+      <p class="pl-4 text-xs dark:text-gray-300">TRIGGER</p>
       <WorkflowTriggerCard />
     </div>
 
     <!-- VISUAL CONNECTOR -->
-    <div class="w-full grid grid-cols-3 place-items-center place-content-center">
-      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">RULES</p>
-      <div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
+    <div class="relative w-full grid grid-cols-3 place-items-center place-content-center z-10">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-xs dark:text-gray-300">RULES</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center">
         <div
-          class="rounded-full border-[6px] border-immich-dark-primary h-[20px] w-[20px] bg-white translate-y-1"
+          class="rounded-full border-[6px] border-immich-primary dark:border-immich-dark-primary h-[20px] w-[20px] bg-white translate-y-1"
+        ></div>
+        <div
+          class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-immich-primary dark:from-immich-dark-primary via-zinc-300 dark:via-gray-600 dark:to-zinc-700"
+        ></div>
+        <div
+          class="rounded-full border-[6px] border-zinc-200 dark:border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"
         ></div>
-        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-immich-dark-primary via-gray-600 to-gray-700"></div>
-        <div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
       </div>
     </div>
 
@@ -48,16 +52,16 @@
       <WorkflowRuleCard />
 
       <div
-        class="border-2 border-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+        class="border-2 dark:border-gray-700 dark:text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
       >
         <span><Icon path={mdiPlus} /></span> ADD RULE
       </div>
     </div>
 
     <!-- VISUAL CONNECTOR -->
-    <div class="w-full grid grid-cols-3 place-items-center place-content-center -translate-y-9">
-      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">ACTIONS</p>
-      <div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
+    <div class="relative w-full grid grid-cols-3 place-items-center place-content-center -translate-y-9 z-10">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-xs dark:text-gray-300">ACTIONS</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center">
         <div class="rounded-full border-[6px] border-gray-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
         <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-gray-900 via-indigo-800 to-gray-700"></div>
         <div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
@@ -69,7 +73,7 @@
       <WorkflowActionCard />
       <WorkflowActionCard />
       <div
-        class="border-2 border-gray-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+        class="border-2 dark:border-gray-500 dark:text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
       >
         <span><Icon path={mdiPlus} /></span> ADD ACTION
       </div>
diff --git a/web/src/lib/components/workflow-page/workflow-list.svelte b/web/src/lib/components/workflow-page/workflow-list.svelte
index 80a37d625c..cdb3f6758c 100644
--- a/web/src/lib/components/workflow-page/workflow-list.svelte
+++ b/web/src/lib/components/workflow-page/workflow-list.svelte
@@ -3,8 +3,8 @@
   import WorkflowCard from '$lib/components/workflow-page/workflow-card.svelte';
 </script>
 
-<section id="workflow-list" class="border-r border-gray-800 h-full relative overflow-scroll pr-2">
-  <div class="sticky top-0 dark:bg-immich-dark-bg flex justify-between place-items-center pr-2 py-4">
+<section id="workflow-list" class="border-r border-gray-200 dark:border-gray-800 h-full relative overflow-scroll pr-2">
+  <div class="sticky top-0 dark:bg-immich-dark-bg flex justify-between place-items-center pr-2 py-4 bg-immich-bg">
     <p class="text-xs dark:text-white">CURRENT WORKFLOWS</p>
     <Button size="sm">New Workflow</Button>
   </div>
diff --git a/web/src/routes/(user)/workflows/+page.svelte b/web/src/routes/(user)/workflows/+page.svelte
index 5c9dc4a861..dfe7657c43 100644
--- a/web/src/routes/(user)/workflows/+page.svelte
+++ b/web/src/routes/(user)/workflows/+page.svelte
@@ -7,7 +7,7 @@
   export let data: PageData;
 </script>
 
-<UserPageLayout title={data.meta.title}>
+<UserPageLayout title={data.meta.title} scrollbar={false}>
   <section class="grid grid-cols-[25%_1fr] h-full">
     <WorkflowList />
     <WorkflowEditor />