diff --git a/AGENTS.md b/AGENTS.md
index b395f650f..612b84174 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -33,18 +33,7 @@
 
 ## Monorepo Architecture
 
-The project uses **Nx** for build orchestration and task management:
-
-- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
-- **Caching**: Nx provides intelligent caching for faster rebuilds
-- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
-- **Dependencies**: Nx handles dependency graph analysis and parallel execution
-
-Key Nx features:
-
-- Build target caching and incremental builds
-- Parallel task execution across the monorepo
-- Plugin-based architecture for different tools
+The project uses **Nx** for build orchestration and task management
 
 ## Build, Test, and Development Commands
 
@@ -145,6 +134,7 @@ Key Nx features:
     }>()
     ```
 
+  - Prefer reactive props destructuring to `const props = defineProps<...>`
   - Do not use `withDefaults` or runtime props declaration
   - Do not import Vue macros unnecessarily
   - Prefer `useModel` to separately defining a prop and emit
@@ -158,29 +148,40 @@ Key Nx features:
 1. Leverage VueUse functions for performance-enhancing styles
 2. Use es-toolkit for utility functions
 3. Use TypeScript for type safety
-4. Implement proper props and emits definitions
-5. Utilize Vue 3's Teleport component when needed
-6. Use Suspense for async components
-7. Implement proper error handling
-8. Follow Vue 3 style guide and naming conventions
-9. Use Vite for fast development and building
-10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
-11. Avoid new usage of PrimeVue components
-12. Write tests for all changes, especially bug fixes to catch future regressions
-13. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-14. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-15. Refactoring should be used to make complex code simpler
+4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
+5. In Vue Components, implement proper props and emits definitions
+6. Utilize Vue 3's Teleport component when needed
+7. Use Suspense for async components
+8. Implement proper error handling
+9. Follow Vue 3 style guide and naming conventions
+10. Use Vite for fast development and building
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+12. Avoid new usage of PrimeVue components
+13. Write tests for all changes, especially bug fixes to catch future regressions
+14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
+15. Do not add or retain redundant comments, clean as you go
+16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
+17. Refactoring should be used to make complex code simpler
+18. Try to minimize the surface area (exported values) of each module and composable
+19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
+20. Keep functions short and functional
+21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
+22. Avoid mutable state, prefer immutability and assignment at point of declaration
+23. Favor pure functions (especially testable ones)
+24. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
 
 ## External Resources
 
 - Vue: <https://vuejs.org/api/>
 - Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
+- VueUse: <https://vueuse.org/functions.html>
 - shadcn/vue: <https://www.shadcn-vue.com/>
 - Reka UI: <https://reka-ui.com/>
 - PrimeVue: <https://primevue.org>
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+- Nx: <https://nx.dev/docs/reference/nx-commands>
 
 ## Project Philosophy
 
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index df5b1e26a..7304faf73 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -327,19 +327,6 @@ export class ComfyPage {
     }
     await this.goto()
 
-    // Unify font for consistent screenshots.
-    await this.page.addStyleTag({
-      url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
-    })
-    await this.page.addStyleTag({
-      url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
-    })
-    await this.page.addStyleTag({
-      content: `
-      * {
-        font-family: 'Roboto Mono', 'Noto Color Emoji';
-      }`
-    })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
       () =>
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png
index a1503a8e3..1f6617a79 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png
index 70c81dfbb..bd045f3bc 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png
index 47083ae5c..6be913503 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png
index 722020a96..6634a4f3f 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png
index 5467af1e7..1f6617a79 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png
index ee50ed0c5..c890ea01b 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png
index 520cf8a98..450dda53b 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png
index 95f577069..59e883c9b 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png
index 6b0e3a30a..5f8c3f8a2 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png
index 722020a96..6634a4f3f 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png
index 6f5edfd8f..782465751 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png
index 9a695eed8..066cfc912 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png
index 1c1a63047..427ed8f11 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png
index 164773278..0be7dd2ef 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png
index be7214acf..885c54474 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png
index fdc151be1..b1f181c75 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png differ
diff --git a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
index 10d964055..33365b04b 100644
Binary files a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png and b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png differ
diff --git a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
index dd7bda4c8..32b9df704 100644
Binary files a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png and b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
index ed1732e67..fd35928fe 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
index 16f7fcc64..11a6e4ae8 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
index e2e2f2206..f633b43c3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png
index 27c987620..f1920c7ab 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png
index 5732eea2b..b04c661c1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png
index 3ebdeb306..24039678a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png
index ba16c1a37..0a280129c 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png
index fd4b5a115..73abd26d3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png
index c07494c21..e6e3898fc 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
index d59e9707a..188f5b9c9 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png
index b8e5cdab9..003881834 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png
index e425d88e8..4c40b0fe1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png
index 99bd797a8..ebbb915df 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png
index 3e8474a2b..636e40b1a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png
index 082281496..49e308067 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png
index 750d15c1b..ae1d2c3ba 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png
index d0bd046ad..b43040ceb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png
index 750d15c1b..ae1d2c3ba 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png
index 750d15c1b..ae1d2c3ba 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png
index c457dea5c..b0fb3f197 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png
index 7a631a02f..49b4bd9ec 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png
index 8255f0f5a..0a4662c9c 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png
index a290bd78f..47cd88441 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png
index f6b135cb6..ae5d7b47d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png
index a6d09ff18..802ba3d04 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png
index a6d09ff18..802ba3d04 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png
index 7445cc3f9..6dcb27ee1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png
index 5b2380510..4697eb9b3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png
index 02d3823e4..decd4f08d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png
index fd4b5a115..73abd26d3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png
index 5b2380510..4697eb9b3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png
index 7445cc3f9..6dcb27ee1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png
index 89cdd22d2..437fcc804 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png
index 6d06644e3..86c8d029a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png
index 51f5fc50e..f00ea2730 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png
index a8fed2ac0..8f87009b7 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png
index 6811cb646..71fd19548 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png
index 6ce3ce119..bed5dbc15 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png
index a149cb8ef..0339957f6 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png
index f57ca3be8..84ca9bb40 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png
index d0bd046ad..b43040ceb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png
index 9e998d26f..e3a7c924a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png
index f76d1945d..3ff5ff7fa 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png
index 797b10f6f..ee32180ce 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png
index 797b10f6f..ee32180ce 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png
index 1dfcfa4fe..09c386728 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png
index dc1258e21..a1b940379 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png
index 2a80227ab..9079658bd 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png
index 37866d892..3e9dea4cf 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png
index d0bd046ad..b43040ceb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png
index c457dea5c..b0fb3f197 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png
index a9d0efb74..8700c57cb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png
index a6d09ff18..802ba3d04 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png
index 750d15c1b..ae1d2c3ba 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png
index a9d0efb74..8700c57cb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png
index 57a92edc5..6d6b998be 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png
index e607294e3..90a9ad302 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png
index 3db5f8a8c..de796be6b 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png
index 2c3343f6b..ba693d6b8 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png
index 7b7b8f84a..5431e2e2c 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png
index 67a37ae57..e9e5a96a4 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png
index dfd279b57..a2bb05aef 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png
index a149cb8ef..0339957f6 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png
index 3d891b985..b009b37d3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png
index 39ec12552..48067d42f 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index ef8c2d9b2..1c1bff87b 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png
index 4be78a0bd..ea1a07197 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png
index a3f68aaf7..78b013f35 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png
index 910bf98e6..e0d052cbf 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png
index 27b3ff339..f99107d05 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png
index a135084e8..34a7cbda9 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png
index e807682d3..51d3edd85 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png
index f58f43895..427051e17 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png
index 2e327dff0..6df3c877c 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png
index 2ff59b391..41eec6f16 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png
index 1d8908e17..d12cffbe9 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png
index 65446a6c7..8c22a4990 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png
index 65446a6c7..8c22a4990 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png
index 65446a6c7..8c22a4990 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png
index 2e327dff0..6df3c877c 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png
index 58e7be2ea..c7be8c99e 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png
index 2e327dff0..6df3c877c 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png
index 0b2859d12..01e67a769 100644
Binary files a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png and b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png differ
diff --git a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png
index a6d8fe852..c929c85b2 100644
Binary files a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png and b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png
index eaf2a528c..7a2293ae1 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png
index 8b8c993c3..fc9dcceb2 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png
index 97a24c6dc..8eb1320a8 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png
index 3e28c594a..68919a246 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png
index b81e9e785..a3870d5d0 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png
index 7b5a380fc..01f00d5b2 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png
index 1c2e2e274..54acf9571 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png
index d1617f599..c03993e86 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png
index 415531498..fd02faae0 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png
index 5ae61ea03..9e7fd8bcf 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png
index f76546805..8f979150e 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png
index 84ed95b0d..105836f6e 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png
index 10c5870f3..e25b0aeb1 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png
index ecea34922..117adfce9 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png
index 1202e34d9..18ec479bf 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png
index 654e43b3e..ceb29129f 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png
index 127e5be05..126b2613c 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png
index 127e5be05..126b2613c 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png
index a371964ba..955589171 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png
index c511957c4..ced7e1963 100644
Binary files a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png and b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png
index d64126266..0dbdcafe6 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png
index 40d877ff9..80cd43050 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png
index ff50afcd4..85668dc5a 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png
index b8c243f0b..e405605b0 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png differ
diff --git a/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png b/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png
index 3a838d19c..e8532a881 100644
Binary files a/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png and b/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png differ
diff --git a/browser_tests/tests/releaseNotifications.spec.ts b/browser_tests/tests/releaseNotifications.spec.ts
index 3b16be249..a45527de7 100644
--- a/browser_tests/tests/releaseNotifications.spec.ts
+++ b/browser_tests/tests/releaseNotifications.spec.ts
@@ -50,7 +50,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Verify "What's New?" section shows the release
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).toBeVisible()
 
     // Should show the release version
@@ -79,7 +79,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Verify "What's New?" section shows no releases
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).toBeVisible()
 
     // Should show "No recent releases" message
@@ -125,7 +125,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Should show no releases due to error
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(
       whatsNewSection.locator('text=No recent releases')
     ).toBeVisible()
@@ -175,7 +175,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Verify "What's New?" section is hidden
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).not.toBeVisible()
 
     // Should not show any popups or toasts
@@ -260,7 +260,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Verify "What's New?" section is visible
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).toBeVisible()
 
     // Should show the release
@@ -308,7 +308,7 @@ test.describe('Release Notifications', () => {
     await helpCenterButton.click()
 
     // Verify "What's New?" section is visible
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).toBeVisible()
 
     // Close help center
@@ -359,7 +359,7 @@ test.describe('Release Notifications', () => {
     await expect(helpMenu).toBeVisible()
 
     // Section should be hidden regardless of empty releases
-    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    const whatsNewSection = comfyPage.page.getByTestId('whats-new-section')
     await expect(whatsNewSection).not.toBeVisible()
   })
 })
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png
index 75c7dd2b3..bfa02874a 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png
index be8c019f3..2aa745cdb 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png
index d7ee9ff26..5d3b7b8a8 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png
index 11ecdabd0..4b4dcb3db 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png
index 8723985d2..20ccbb535 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png
index c07494c21..e6e3898fc 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
index 040347b79..22fc896cb 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png
index d141d9912..ed982fa65 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png
index 2755d74c5..65519ec1f 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png
index fbadb08da..b57529324 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png
index 306ee8ebb..c009aae95 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png
index a38379583..65af1329f 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
index a6d0ffdba..07ff7a096 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png
index 4c1ed8d69..97144d482 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png
index ea0156109..61311cdf3 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png
index 4910f554a..26d273be0 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png
index a77af5fc8..abfc3ee3a 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
index c5855906d..7ecb4123e 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
index a6d0ffdba..07ff7a096 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png
index 7b75a5a3e..1f3146378 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png
index a6d09ff18..802ba3d04 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png
index c0b91f3ec..5f6f13be1 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png
index a80e1ad38..a14cb7bc3 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
index 1fc54d81d..036340d38 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
index dd636783b..6dd6f39a7 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
index 3e804b0ab..37e5c6cc4 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png
index 2006231c7..0c57f7db1 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
index 74c9f0b4b..b1e97d8f8 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
index 09981ee3d..09a78fb6e 100644
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -828,55 +828,55 @@ test.describe('Vue Node Link Interaction', () => {
   })
 
   test.describe('Release actions (Shift-drop)', () => {
-    test.fixme(
-      'Context menu opens and endpoint is pinned on Shift-drop',
-      async ({ comfyPage, comfyMouse }) => {
-        await comfyPage.setSetting(
-          'Comfy.LinkRelease.ActionShift',
-          'context menu'
-        )
+    test('Context menu opens and endpoint is pinned on Shift-drop', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'context menu'
+      )
 
-        const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-        expect(samplerNode).toBeTruthy()
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
 
-        const outputCenter = await getSlotCenter(
-          comfyPage.page,
-          samplerNode.id,
-          0,
-          false
-        )
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
 
-        const dropPos = { x: outputCenter.x + 180, y: outputCenter.y - 140 }
+      const dropPos = { x: outputCenter.x + 90, y: outputCenter.y - 70 }
 
-        await comfyMouse.move(outputCenter)
-        await comfyPage.page.keyboard.down('Shift')
-        try {
-          await comfyMouse.drag(dropPos)
-          await comfyMouse.drop()
-        } finally {
-          await comfyPage.page.keyboard.up('Shift').catch(() => {})
-        }
-
-        // Context menu should be visible
-        const contextMenu = comfyPage.page.locator('.litecontextmenu')
-        await expect(contextMenu).toBeVisible()
-
-        // Pinned endpoint should not change with mouse movement while menu is open
-        const before = await comfyPage.page.evaluate(() => {
-          const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
-          return Array.isArray(snap) ? [snap[0], snap[1]] : null
-        })
-        expect(before).not.toBeNull()
-
-        // Move mouse elsewhere and verify snap position is unchanged
-        await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
-        const after = await comfyPage.page.evaluate(() => {
-          const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
-          return Array.isArray(snap) ? [snap[0], snap[1]] : null
-        })
-        expect(after).toEqual(before)
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
       }
-    )
+
+      // Context menu should be visible
+      const contextMenu = comfyPage.page.locator('.litecontextmenu')
+      await expect(contextMenu).toBeVisible()
+
+      // Pinned endpoint should not change with mouse movement while menu is open
+      const before = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(before).not.toBeNull()
+
+      // Move mouse elsewhere and verify snap position is unchanged
+      await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
+      const after = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(after).toEqual(before)
+    })
 
     test('Context menu -> Search pre-filters by link type and connects after selection', async ({
       comfyPage,
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png
index 05764b532..6cf275bc9 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png
index fb055e8c8..f42f29e6a 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png
index 745e69148..de0c886dc 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png
index 0b7cb495d..9c5bffa2d 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png
index 0b7cb495d..9c5bffa2d 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png
index 520576df1..fadeffceb 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png
index 1b01d4972..7d4f6f253 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png
index 89b8ae6f3..2980d8581 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png
index 538e0b460..9ecdeeff2 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png
index b631cd32d..a2bfb22d7 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png
index d5e10e061..b67550204 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png
index b356214e8..422a7afd0 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png
index 2c82d9c8d..b2d74cf04 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png differ
diff --git a/package.json b/package.json
index 1762ba3c2..d8d15318f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.34.7",
+  "version": "1.35.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index adf386489..4e21104e3 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -89,6 +89,8 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
+  
+
   --color-coral-red-600: #973a40;
   --color-coral-red-500: #c53f49;
   --color-coral-red-400: #dd424e;
@@ -183,9 +185,13 @@
   --interface-menu-component-surface-hovered: var(--color-smoke-200);
   --interface-menu-component-surface-selected: var(--color-smoke-400);
   --interface-menu-keybind-surface-default: var(--color-smoke-500);
+  --interface-menu-surface: var(--color-white);
+  --interface-menu-stroke: var(--color-smoke-600);
   --interface-panel-surface: var(--color-white);
   --interface-stroke: var(--color-smoke-300);
 
+  
+
   --nav-background: var(--color-white);
 
   --node-border: var(--color-smoke-300);
@@ -301,6 +307,8 @@
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
   --interface-menu-component-surface-selected: var(--color-charcoal-300);
   --interface-menu-keybind-surface-default: var(--color-charcoal-200);
+  --interface-menu-surface: var(--color-charcoal-800);
+  --interface-menu-stroke: var(--color-ash-800);
   --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
 
@@ -416,6 +424,8 @@
   --color-interface-menu-keybind-surface-default: var(
     --interface-menu-keybind-surface-default
   );
+  --color-interface-menu-surface: var(--interface-menu-surface);
+  --color-interface-menu-stroke: var(--interface-menu-stroke);
   --color-interface-panel-surface: var(--interface-panel-surface);
   --color-interface-panel-hover-surface: var(--interface-panel-hover-surface);
   --color-interface-panel-selected-surface: var(
@@ -566,7 +576,7 @@ body {
   max-height: -webkit-fill-available;
   min-width: -webkit-fill-available;
   max-width: -webkit-fill-available;
-  font-family: Arial, sans-serif;
+  font-family: Inter, Arial, sans-serif;
 }
 
 .comfy-multiline-input {
@@ -880,7 +890,6 @@ body {
   align-items: center;
   color: var(--descrip-text);
   background-color: var(--comfy-menu-bg);
-  font-family: sans-serif;
   padding: 10px;
   border-radius: 0 8px 8px;
   box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
@@ -978,7 +987,6 @@ span.drag-handle {
   margin-top: -0.4em;
   margin-left: -0.2em;
   font-size: 12px;
-  font-family: sans-serif;
   letter-spacing: 2px;
   color: var(--drag-text);
   text-shadow: 1px 0 1px black;
@@ -1038,7 +1046,6 @@ button.comfy-queue-btn {
 .comfy-modal.comfy-settings,
 .comfy-modal.comfy-manage-templates {
   text-align: center;
-  font-family: sans-serif;
   color: var(--descrip-text);
   z-index: 99;
 }
@@ -1102,7 +1109,6 @@ button.comfy-queue-btn {
 
 .graphdialog .name {
   font-size: 14px;
-  font-family: sans-serif;
   color: var(--descrip-text);
 }
 
@@ -1142,7 +1148,6 @@ dialog::backdrop {
 }
 
 .comfy-dialog.comfy-modal {
-  font-family: Arial, sans-serif;
   border-color: var(--bg-color);
   box-shadow: none;
   border: 2px solid var(--border-color);
@@ -1172,7 +1177,6 @@ dialog::backdrop {
 
 .litegraph .dialog {
   z-index: 1;
-  font-family: Arial, sans-serif;
 }
 
 .litegraph .litemenu-entry.has_submenu {
@@ -1337,7 +1341,6 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelTitle {
     text-align: center;
     font-size: 15px;
-    font-family: sans-serif;
     color: var(--descrip-text);
     margin-top: 10px;
   }
@@ -1445,7 +1448,6 @@ audio.comfy-audio.empty-audio-widget {
     background: rgb(0 0 0 / 0.2);
     border: 1px solid var(--border-color);
     color: var(--input-text);
-    font-family: sans-serif;
     font-size: 15px;
     pointer-events: auto;
     transition: background-color 0.1s;
@@ -1560,7 +1562,6 @@ audio.comfy-audio.empty-audio-widget {
     border: 1px solid var(--p-form-field-border-color);
     border-radius: 10px;
     color: var(--input-text);
-    font-family: sans-serif;
     pointer-events: auto;
     transition: 0.1s;
     width: 60px;
@@ -1576,7 +1577,6 @@ audio.comfy-audio.empty-audio-widget {
     border: 1px solid var(--p-form-field-border-color);
     border-radius: 10px;
     color: var(--input-text);
-    font-family: sans-serif;
     pointer-events: auto;
     transition: 0.1s;
     width: 60px;
@@ -1764,7 +1764,6 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelSubTitle {
     text-align: left;
     font-size: 12px;
-    font-family: sans-serif;
     color: var(--descrip-text);
   }
 
diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue
index f1705d0af..cbf4fc134 100644
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -10,12 +10,12 @@
         class="bg-transparent"
       >
         <div class="flex w-full justify-between">
-          <div class="tabs-container">
+          <div class="tabs-container font-inter">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="m-1 mx-2 border-none"
+              class="m-1 mx-2 border-none font-inter"
               :class="{
                 'tab-list-single-item':
                   bottomPanelStore.bottomPanelTabs.length === 1
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index c6a3dbe60..828d8ff45 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4"
+    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index c5e0f6dce..c803c05f5 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -138,7 +138,6 @@ useEventListener(window, 'click', hideTooltip)
   border-radius: 5px;
   box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
   color: var(--input-text);
-  font-family: sans-serif;
   left: 0;
   max-width: 30vw;
   padding: 4px 8px;
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index 77567fd3b..7465429c2 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -1,38 +1,52 @@
 <template>
   <div
-    class="help-center-menu"
+    class="help-center-menu flex flex-col items-start gap-1"
     role="menu"
-    :aria-label="$t('helpCenter.helpFeedback')"
+    :aria-label="$t('help.helpCenterMenu')"
   >
     <!-- Main Menu Items -->
-    <nav class="help-menu-section" role="menubar">
-      <button
-        v-for="menuItem in menuItems"
-        v-show="menuItem.visible !== false"
-        :key="menuItem.key"
-        type="button"
-        class="help-menu-item"
-        :class="{ 'more-item': menuItem.key === 'more' }"
-        role="menuitem"
-        @click="menuItem.action"
-        @mouseenter="onMenuItemHover(menuItem.key, $event)"
-        @mouseleave="onMenuItemLeave(menuItem.key)"
-      >
-        <div class="help-menu-icon-container">
-          <div class="help-menu-icon">
-            <component
-              :is="menuItem.icon"
-              v-if="typeof menuItem.icon === 'object'"
-              :size="16"
-            />
-            <i v-else :class="menuItem.icon" />
+    <div class="w-full">
+      <nav class="flex w-full flex-col gap-2" role="menubar">
+        <button
+          v-for="menuItem in menuItems"
+          v-show="menuItem.visible !== false"
+          :key="menuItem.key"
+          type="button"
+          class="help-menu-item"
+          :class="{ 'more-item': menuItem.key === 'more' }"
+          role="menuitem"
+          @click="menuItem.action"
+          @mouseenter="onMenuItemHover(menuItem.key, $event)"
+          @mouseleave="onMenuItemLeave(menuItem.key)"
+        >
+          <div class="help-menu-icon-container">
+            <div class="help-menu-icon">
+              <component
+                :is="menuItem.icon"
+                v-if="typeof menuItem.icon === 'object'"
+                :size="16"
+              />
+              <i v-else :class="menuItem.icon" />
+            </div>
+            <div v-if="menuItem.showRedDot" class="menu-red-dot" />
           </div>
-          <div v-if="menuItem.showRedDot" class="menu-red-dot" />
-        </div>
-        <span class="menu-label">{{ menuItem.label }}</span>
-        <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
-      </button>
-    </nav>
+          <span class="menu-label">{{ menuItem.label }}</span>
+          <i
+            v-if="menuItem.showExternalIcon"
+            class="icon-[lucide--external-link] text-primary w-4 h-4 ml-auto"
+          />
+          <i
+            v-if="menuItem.key === 'more'"
+            class="pi pi-chevron-right ml-auto"
+          />
+        </button>
+      </nav>
+      <div
+        class="flex h-4 flex-col items-center justify-between self-stretch p-2"
+      >
+        <div class="w-full border-b border-interface-menu-stroke" />
+      </div>
+    </div>
 
     <!-- More Submenu -->
     <Teleport to="body">
@@ -68,26 +82,34 @@
     </Teleport>
 
     <!-- What's New Section -->
-    <section v-if="showVersionUpdates" class="whats-new-section">
-      <h3 class="section-description">{{ $t('helpCenter.whatsNew') }}</h3>
+    <section
+      v-if="showVersionUpdates"
+      class="w-full"
+      data-testid="whats-new-section"
+    >
+      <h3
+        class="section-description flex items-center gap-2.5 self-stretch px-8 pt-2 pb-2"
+      >
+        {{ $t('helpCenter.whatsNew') }}
+      </h3>
 
       <!-- Release Items -->
       <div
         v-if="hasReleases"
         role="group"
-        :aria-label="$t('helpCenter.recentReleases')"
+        :aria-label="$t('help.recentReleases')"
       >
         <article
           v-for="release in releaseStore.recentReleases"
           :key="release.id || release.version"
-          class="help-menu-item release-menu-item"
+          class="release-menu-item flex h-12 min-h-6 cursor-pointer items-center gap-2 self-stretch rounded p-2 transition-colors hover:bg-interface-menu-component-surface-hovered"
           role="button"
           tabindex="0"
           @click="onReleaseClick(release)"
           @keydown.enter="onReleaseClick(release)"
           @keydown.space.prevent="onReleaseClick(release)"
         >
-          <i class="pi pi-refresh help-menu-icon" aria-hidden="true" />
+          <i class="help-menu-icon icon-[lucide--package]" aria-hidden="true" />
           <div class="release-content">
             <span class="release-title">
               {{
@@ -106,13 +128,6 @@
               </span>
             </time>
           </div>
-          <Button
-            v-if="shouldShowUpdateButton(release)"
-            :label="$t('helpCenter.updateAvailable')"
-            size="small"
-            class="update-button"
-            @click.stop="onUpdate(release)"
-          />
         </article>
       </div>
 
@@ -137,7 +152,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -166,6 +180,7 @@ interface MenuItem {
   type?: 'item' | 'divider'
   items?: MenuItem[]
   showRedDot?: boolean
+  showExternalIcon?: boolean
 }
 
 // Constants
@@ -192,6 +207,9 @@ const commandStore = useCommandStore()
 const settingStore = useSettingStore()
 const telemetry = useTelemetry()
 
+// Track when help center was opened
+const openedAt = ref(Date.now())
+
 // Emits
 const emit = defineEmits<{
   close: []
@@ -202,7 +220,6 @@ const isSubmenuVisible = ref(false)
 const submenuRef = ref<HTMLElement | null>(null)
 const submenuStyle = ref<CSSProperties>({})
 let hoverTimeout: number | null = null
-const openedAt = ref<number>(Date.now())
 
 // Computed
 const hasReleases = computed(() => releaseStore.releases.length > 0)
@@ -273,11 +290,34 @@ const moreMenuItem = computed(() =>
 
 const menuItems = computed<MenuItem[]>(() => {
   const items: MenuItem[] = [
+    {
+      key: 'feedback',
+      type: 'item',
+      icon: 'icon-[lucide--clipboard-pen]',
+      label: t('helpCenter.feedback'),
+      action: () => {
+        trackResourceClick('help_feedback', false)
+        void commandStore.execute('Comfy.ContactSupport')
+        emit('close')
+      }
+    },
+    {
+      key: 'help',
+      type: 'item',
+      icon: 'icon-[lucide--message-circle-question]',
+      label: t('helpCenter.help'),
+      action: () => {
+        trackResourceClick('help_feedback', false)
+        void commandStore.execute('Comfy.ContactSupport')
+        emit('close')
+      }
+    },
     {
       key: 'docs',
       type: 'item',
-      icon: 'pi pi-book',
+      icon: 'icon-[lucide--book-open]',
       label: t('helpCenter.docs'),
+      showExternalIcon: true,
       action: () => {
         trackResourceClick('docs', true)
         const path = isCloud ? '/get_started/cloud' : '/'
@@ -290,6 +330,7 @@ const menuItems = computed<MenuItem[]>(() => {
       type: 'item',
       icon: 'pi pi-discord',
       label: 'Discord',
+      showExternalIcon: true,
       action: () => {
         trackResourceClick('discord', true)
         openExternalLink(staticUrls.discord)
@@ -299,24 +340,14 @@ const menuItems = computed<MenuItem[]>(() => {
     {
       key: 'github',
       type: 'item',
-      icon: 'pi pi-github',
+      icon: 'icon-[lucide--github]',
       label: t('helpCenter.github'),
+      showExternalIcon: true,
       action: () => {
         trackResourceClick('github', true)
         openExternalLink(staticUrls.github)
         emit('close')
       }
-    },
-    {
-      key: 'help',
-      type: 'item',
-      icon: 'pi pi-question-circle',
-      label: t('helpCenter.helpFeedback'),
-      action: () => {
-        trackResourceClick('help_feedback', false)
-        void commandStore.execute('Comfy.ContactSupport')
-        emit('close')
-      }
     }
   ]
 
@@ -438,32 +469,22 @@ const formatReleaseDate = (dateString?: string): string => {
   const diffTime = Math.abs(now.getTime() - date.getTime())
 
   const timeUnits = [
-    { unit: TIME_UNITS.YEAR, suffix: 'y' },
-    { unit: TIME_UNITS.MONTH, suffix: 'mo' },
-    { unit: TIME_UNITS.WEEK, suffix: 'w' },
-    { unit: TIME_UNITS.DAY, suffix: 'd' },
-    { unit: TIME_UNITS.HOUR, suffix: 'h' },
-    { unit: TIME_UNITS.MINUTE, suffix: 'min' }
+    { unit: TIME_UNITS.YEAR, key: 'yearsAgo' },
+    { unit: TIME_UNITS.MONTH, key: 'monthsAgo' },
+    { unit: TIME_UNITS.WEEK, key: 'weeksAgo' },
+    { unit: TIME_UNITS.DAY, key: 'daysAgo' },
+    { unit: TIME_UNITS.HOUR, key: 'hoursAgo' },
+    { unit: TIME_UNITS.MINUTE, key: 'minutesAgo' }
   ]
 
-  for (const { unit, suffix } of timeUnits) {
+  for (const { unit, key } of timeUnits) {
     const value = Math.floor(diffTime / unit)
     if (value > 0) {
-      return `${value}${suffix} ago`
+      return t(`g.relativeTime.${key}`, { count: value })
     }
   }
 
-  return 'now'
-}
-
-const shouldShowUpdateButton = (release: ReleaseNote): boolean => {
-  // Hide update buttons in cloud distribution
-  if (isCloud) return false
-
-  return (
-    releaseStore.shouldShowUpdateButton &&
-    release === releaseStore.recentReleases[0]
-  )
+  return t('g.relativeTime.now')
 }
 
 // Event Handlers
@@ -533,14 +554,6 @@ const onReleaseClick = (release: ReleaseNote): void => {
   emit('close')
 }
 
-const onUpdate = (_: ReleaseNote): void => {
-  trackResourceClick('docs', true)
-  openExternalLink(
-    buildDocsUrl('/installation/update_comfyui', { includeLocale: true })
-  )
-  emit('close')
-}
-
 // Lifecycle
 onMounted(async () => {
   telemetry?.trackHelpCenterOpened({ source: 'sidebar' })
@@ -557,38 +570,37 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .help-center-menu {
-  width: 380px;
+  width: 256px;
   max-height: 500px;
   overflow-y: auto;
-  background: var(--p-content-background);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
-  border: 1px solid var(--p-content-border-color);
-  backdrop-filter: blur(8px);
+  background: var(--interface-menu-surface);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 0.1);
+  border: 1px solid var(--interface-menu-stroke);
+  padding: 12px 8px;
   position: relative;
 }
 
-.help-menu-section {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--p-content-border-color);
-}
-
 .help-menu-item {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.75rem 1rem;
+  height: 32px;
+  min-height: 24px;
+  padding: 8px;
+  gap: 8px;
   background: transparent;
   border: none;
+  border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.2s;
   font-size: 0.9rem;
-  color: inherit;
+  color: var(--text-primary);
   text-align: left;
 }
 
 .help-menu-item:hover {
-  background-color: #007aff26;
+  background-color: var(--interface-menu-component-surface-hovered);
 }
 
 .help-menu-item:focus,
@@ -599,16 +611,16 @@ onBeforeUnmount(() => {
 
 .help-menu-icon-container {
   position: relative;
-  margin-right: 0.75rem;
   width: 16px;
+  height: 16px;
   flex-shrink: 0;
 }
 
 .help-menu-icon {
-  margin-right: 0.75rem;
-  font-size: 1rem;
-  color: var(--p-text-muted-color);
   width: 16px;
+  height: 16px;
+  font-size: 16px;
+  color: var(--text-primary);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -616,7 +628,9 @@ onBeforeUnmount(() => {
 }
 
 .help-menu-icon svg {
-  color: var(--p-text-muted-color);
+  width: 16px;
+  height: 16px;
+  color: var(--text-primary);
 }
 
 .menu-red-dot {
@@ -639,16 +653,14 @@ onBeforeUnmount(() => {
   justify-content: space-between;
 }
 
-.whats-new-section {
-  padding: 0.5rem 0;
-}
-
 .section-description {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--p-text-muted-color);
-  margin: 0 0 0.5rem;
-  padding: 0 1rem;
+  color: var(--text-secondary);
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -661,7 +673,7 @@ onBeforeUnmount(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 4px;
   min-width: 0;
 }
 
@@ -669,12 +681,22 @@ onBeforeUnmount(() => {
   font-size: 0.9rem;
   line-height: 1.2;
   font-weight: 500;
+  color: var(--text-primary);
 }
 
 .release-date {
   height: 16px;
-  font-size: 0.75rem;
-  color: var(--p-text-muted-color);
+  color: var(--text-secondary);
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
 
 .release-date .hover-state {
@@ -691,35 +713,31 @@ onBeforeUnmount(() => {
   display: inline;
 }
 
-.update-button {
-  margin-left: 0.5rem;
-  font-size: 0.8rem;
-  padding: 0.25rem 0.75rem;
-  flex-shrink: 0;
-}
-
 /* Submenu Styles */
 .more-submenu {
   width: 210px;
-  padding: 0.5rem 0;
-  background: var(--p-content-background);
-  border-radius: 12px;
-  border: 1px solid var(--p-content-border-color);
-  box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
+  padding: 12px 8px;
+  background: var(--interface-menu-surface);
+  border-radius: 8px;
+  border: 1px solid var(--interface-menu-stroke);
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 0.1);
   overflow: hidden;
   transition: opacity 0.15s ease-out;
 }
 
 .submenu-item {
-  padding: 0.75rem 1rem;
-  color: inherit;
+  padding: 8px;
+  height: 32px;
+  min-height: 24px;
+  border-radius: 4px;
+  color: var(--text-primary);
   font-size: 0.9rem;
   font-weight: inherit;
   line-height: inherit;
 }
 
 .submenu-item:hover {
-  background-color: #007aff26;
+  background-color: var(--interface-menu-component-surface-hovered);
 }
 
 .submenu-item:focus,
@@ -730,8 +748,8 @@ onBeforeUnmount(() => {
 
 .submenu-divider {
   height: 1px;
-  background: #3e3e3e;
-  margin: 0.5rem 0;
+  background: var(--interface-menu-stroke);
+  margin: 4px 0;
 }
 
 /* Scrollbar Styling */
@@ -744,12 +762,12 @@ onBeforeUnmount(() => {
 }
 
 .help-center-menu::-webkit-scrollbar-thumb {
-  background: var(--p-content-border-color);
+  background: var(--interface-menu-stroke);
   border-radius: 3px;
 }
 
 .help-center-menu::-webkit-scrollbar-thumb:hover {
-  background: var(--p-text-muted-color);
+  background: var(--text-secondary);
 }
 
 /* Reduced Motion */
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 42b486e46..cb898e273 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -200,7 +200,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
 }
 
 ._sb_node_preview {
-  font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);
   min-width: 300px;
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index a2afcd206..7f0c11639 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -182,7 +182,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2"
+            class="text-sm py-1 px-2 font-inter"
             :value="tab.value"
           >
             {{ tab.label() }}
diff --git a/src/components/sidebar/tabs/AssetSidebarTemplate.vue b/src/components/sidebar/tabs/AssetSidebarTemplate.vue
deleted file mode 100644
index 97f75d13d..000000000
--- a/src/components/sidebar/tabs/AssetSidebarTemplate.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div
-    class="flex h-full flex-col bg-interface-panel-surface"
-    :class="props.class"
-  >
-    <div>
-      <div
-        v-if="slots.top"
-        class="flex min-h-12 items-center border-b border-interface-stroke px-4 py-2"
-      >
-        <slot name="top" />
-      </div>
-      <div v-if="slots.header" class="px-4 pb-4">
-        <slot name="header" />
-      </div>
-    </div>
-    <!-- min-h-0 to force scrollpanel to grow -->
-    <ScrollPanel class="min-h-0 grow">
-      <slot name="body" />
-    </ScrollPanel>
-    <div v-if="slots.footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import { useSlots } from 'vue'
-
-const props = defineProps<{
-  class?: string
-}>()
-
-const slots = useSlots()
-</script>
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 2d3b57b01..57afb4dd4 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -1,19 +1,21 @@
 <template>
-  <AssetsSidebarTemplate>
-    <template #top>
-      <span v-if="!isInFolderView" class="font-bold">
-        {{ $t('sideToolbar.mediaAssets.title') }}
-      </span>
-      <div v-else class="flex w-full items-center justify-between gap-2">
+  <SidebarTabTemplate
+    :title="isInFolderView ? '' : $t('sideToolbar.mediaAssets.title')"
+  >
+    <template #alt-title>
+      <div
+        v-if="isInFolderView"
+        class="flex w-full items-center justify-between gap-2"
+      >
         <div class="flex items-center gap-2">
-          <span class="font-bold">{{ $t('Job ID') }}:</span>
+          <span class="font-bold">{{ $t('assetBrowser.jobId') }}:</span>
           <span class="text-sm">{{ folderPromptId?.substring(0, 8) }}</span>
           <button
             class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
             role="button"
             @click="copyJobId"
           >
-            <i class="mb-1 icon-[lucide--copy] text-sm"></i>
+            <i class="icon-[lucide--copy] text-sm"></i>
           </button>
         </div>
         <div>
@@ -23,7 +25,7 @@
     </template>
     <template #header>
       <!-- Job Detail View Header -->
-      <div v-if="isInFolderView" class="pt-4 pb-2">
+      <div v-if="isInFolderView" class="px-2 2xl:px-4">
         <IconTextButton
           :label="$t('sideToolbar.backToAssets')"
           type="secondary"
@@ -35,15 +37,20 @@
         </IconTextButton>
       </div>
       <!-- Normal Tab View -->
-      <TabList v-else v-model="activeTab" class="pt-4 pb-1">
-        <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
-        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
+      <TabList v-else v-model="activeTab" class="font-inter px-2 2xl:px-4">
+        <Tab class="font-inter" value="output">{{
+          $t('sideToolbar.labels.generated')
+        }}</Tab>
+        <Tab class="font-inter" value="input">{{
+          $t('sideToolbar.labels.imported')
+        }}</Tab>
       </TabList>
       <!-- Filter Bar -->
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
         v-model:media-type-filters="mediaTypeFilters"
+        class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
     </template>
@@ -158,7 +165,7 @@
         </div>
       </div>
     </template>
-  </AssetsSidebarTemplate>
+  </SidebarTabTemplate>
   <ResultGallery
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
@@ -177,6 +184,7 @@ import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
@@ -194,8 +202,6 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 
-import AssetsSidebarTemplate from './AssetSidebarTemplate.vue'
-
 const activeTab = ref<'input' | 'output'>('output')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index c5cf5e9bd..01b312f00 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -1,8 +1,5 @@
 <template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.modelLibrary')"
-    class="bg-(--p-tree-background)"
-  >
+  <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
     <template #tool-buttons>
       <Button
         v-tooltip.bottom="$t('g.refresh')"
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index edfa36288..248abc8be 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -3,7 +3,6 @@
     <SidebarTabTemplate
       v-if="!isHelpOpen"
       :title="$t('sideToolbar.nodeLibrary')"
-      class="bg-(--p-tree-background)"
     >
       <template #tool-buttons>
         <Button
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 124dd69ef..593c74ae4 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -3,12 +3,15 @@
     class="comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col"
     :class="props.class"
   >
-    <div class="comfy-vue-side-bar-header">
-      <Toolbar class="min-h-8 rounded-none border-x-0 border-t-0 px-2 py-1">
+    <div class="comfy-vue-side-bar-header flex flex-col gap-2">
+      <Toolbar
+        class="min-h-15.5 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+      >
         <template #start>
-          <span class="truncate text-xs 2xl:text-sm" :title="props.title">
-            {{ props.title.toUpperCase() }}
+          <span class="truncate font-bold" :title="props.title">
+            {{ props.title }}
           </span>
+          <slot name="alt-title" />
         </template>
         <template #end>
           <div
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index d4a649ac8..819b93bcc 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -1,7 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
-    class="workflows-sidebar-tab bg-(--p-tree-background)"
+    class="workflows-sidebar-tab"
   >
     <template #tool-buttons>
       <Button
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
index 9de3d236f..d72cdc079 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -49,7 +49,6 @@ const modelDef = props.modelDef
 <style scoped>
 .model_preview {
   background-color: var(--comfy-menu-bg);
-  font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);
   min-width: 300px;
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index 82408845e..4adcf71c4 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col overflow-auto bg-(--p-tree-background)">
+  <div class="flex h-full flex-col overflow-auto">
     <div
       class="flex items-center border-b border-(--p-divider-color) px-3 py-2"
     >
diff --git a/src/composables/useExternalLink.ts b/src/composables/useExternalLink.ts
index 59cb9f689..2758e2ced 100644
--- a/src/composables/useExternalLink.ts
+++ b/src/composables/useExternalLink.ts
@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 import { electronAPI, isElectron } from '@/utils/envUtil'
-import { useI18n } from 'vue-i18n'
+import { i18n } from '@/i18n'
 
 /**
  * Composable for building docs.comfy.org URLs with automatic locale and platform detection
@@ -23,7 +23,7 @@ import { useI18n } from 'vue-i18n'
  * ```
  */
 export function useExternalLink() {
-  const { locale } = useI18n()
+  const locale = computed(() => String(i18n.global.locale.value))
 
   const isChinese = computed(() => {
     return locale.value === 'zh' || locale.value === 'zh-TW'
diff --git a/src/extensions/core/groupNodeManage.css b/src/extensions/core/groupNodeManage.css
index b72e5606b..932167ab3 100644
--- a/src/extensions/core/groupNodeManage.css
+++ b/src/extensions/core/groupNodeManage.css
@@ -2,7 +2,6 @@
   background: var(--bg-color);
   color: var(--fg-color);
   padding: 0;
-  font-family: Arial, Helvetica, sans-serif;
   border-color: black;
   margin: 20vh auto;
   max-height: 60vh;
diff --git a/src/lib/litegraph/public/css/litegraph.css b/src/lib/litegraph/public/css/litegraph.css
index 9a644149b..83b36dd98 100644
--- a/src/lib/litegraph/public/css/litegraph.css
+++ b/src/lib/litegraph/public/css/litegraph.css
@@ -6,7 +6,6 @@
   -moz-user-select: none;
   -webkit-user-select: none;
   outline: none;
-  font-family: Tahoma, sans-serif;
 }
 
 .lgraphcanvas * {
@@ -14,7 +13,6 @@
 }
 
 .litegraph.litecontextmenu {
-  font-family: Tahoma, sans-serif;
   position: fixed;
   top: 100px;
   left: 100px;
@@ -48,7 +46,6 @@
 }
 
 .litegraph .litemenubar ul {
-  font-family: Tahoma, sans-serif;
   margin: 0;
   padding: 0;
 }
@@ -165,7 +162,6 @@
 }
 
 .litegraph.litesearchbox {
-  font-family: Tahoma, sans-serif;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.5);
   padding-top: 4px;
@@ -198,7 +194,6 @@
 }
 
 .litegraph.lite-search-item {
-  font-family: Tahoma, sans-serif;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   padding-top: 2px;
@@ -302,7 +297,6 @@
 
 .litegraph .dialog .dialog-header .dialog-title {
   font: 1rem;
-  font-family: Inter, Arial, sans-serif;
   margin: 4px;
   padding: 4px 10px;
   display: inline-block;
diff --git a/src/lib/litegraph/src/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts
index d3ae9f018..c48814235 100644
--- a/src/lib/litegraph/src/LiteGraphGlobal.ts
+++ b/src/lib/litegraph/src/LiteGraphGlobal.ts
@@ -59,16 +59,16 @@ export class LiteGraphGlobal {
   NODE_DEFAULT_SHAPE = RenderShape.ROUND
   NODE_BOX_OUTLINE_COLOR = '#FFF'
   NODE_ERROR_COLOUR = '#E00'
-  NODE_FONT = 'Arial'
+  NODE_FONT = 'Inter'
   NODE_DEFAULT_BYPASS_COLOR = '#FF00FF'
   NODE_OPACITY = 0.9
 
-  DEFAULT_FONT = 'Arial'
+  DEFAULT_FONT = 'Inter'
   DEFAULT_SHADOW_COLOR = 'rgba(0,0,0,0.5)'
 
   DEFAULT_GROUP_FONT = 24
   DEFAULT_GROUP_FONT_SIZE?: any
-  GROUP_FONT = 'Arial'
+  GROUP_FONT = 'Inter'
 
   WIDGET_BGCOLOR = '#222'
   WIDGET_OUTLINE_COLOR = '#666'
diff --git a/src/lib/litegraph/src/canvas/InputIndicators.ts b/src/lib/litegraph/src/canvas/InputIndicators.ts
index ba014a7f2..ad98cb533 100644
--- a/src/lib/litegraph/src/canvas/InputIndicators.ts
+++ b/src/lib/litegraph/src/canvas/InputIndicators.ts
@@ -23,7 +23,7 @@ export class InputIndicators implements Disposable {
   colour1 = '#ff5f00'
   colour2 = '#00ff7c'
   colour3 = '#dea7ff'
-  fontString = 'bold 12px Arial'
+  fontString = 'bold 12px Inter, sans-serif'
   // #endregion
 
   // #region state
diff --git a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
index f5cf4dd75..19ba652bd 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
@@ -353,7 +353,7 @@ export abstract class SubgraphIONodeBase<
     editorAlpha?: number
   ): void {
     ctx.fillStyle = '#AAA'
-    ctx.font = '12px Arial'
+    ctx.font = '12px Inter, sans-serif'
     ctx.textBaseline = 'middle'
 
     for (const slot of this.allSlots) {
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f55c2f082..d44ae2bf1 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -199,6 +199,15 @@
     "copy": "Copy",
     "copyJobId": "Copy Job ID",
     "copied": "Copied",
+    "relativeTime": {
+      "now": "now",
+      "yearsAgo": "{count}y ago",
+      "monthsAgo": "{count}mo ago", 
+      "weeksAgo": "{count}w ago",
+      "daysAgo": "{count}d ago",
+      "hoursAgo": "{count}h ago",
+      "minutesAgo": "{count}min ago"
+    },
     "jobIdCopied": "Job ID copied to clipboard",
     "failedToCopyJobId": "Failed to copy job ID",
     "imageUrl": "Image URL",
@@ -749,9 +758,10 @@
     }
   },
   "helpCenter": {
+    "feedback": "Give Feedback",
     "docs": "Docs",
     "github": "Github",
-    "helpFeedback": "Help & Feedback",
+    "help": "Help & Support",
     "managerExtension": "Manager Extension",
     "more": "More...",
     "whatsNew": "What's New?",
@@ -765,10 +775,11 @@
     "reinstall": "Re-Install"
   },
   "releaseToast": {
-    "newVersionAvailable": "New Version Available!",
-    "whatsNew": "What's New?",
+    "newVersionAvailable": "New update is out!",
+    "whatsNew": "See what's new",
     "skip": "Skip",
-    "update": "Update"
+    "update": "Update",
+    "description": "Check out the latest improvements and features in this update."
   },
   "menu": {
     "hideMenu": "Hide Menu",
@@ -1930,6 +1941,7 @@
   },
   "whatsNewPopup": {
     "learnMore": "Learn more",
+    "later": "Later",
     "noReleaseNotes": "No release notes available."
   },
   "breadcrumbsMenu": {
@@ -2085,71 +2097,72 @@
   "cloudSurvey_steps_industry": "What's your primary industry?",
   "cloudSurvey_steps_making": "What do you plan on making?",
   "assetBrowser": {
-    "assets": "Assets",
+    "allCategory": "All {category}",
+    "allModels": "All Models",
     "assetCollection": "Asset collection",
-    "checkpoints": "Checkpoints",
+    "assets": "Assets",
+    "baseModels": "Base models",
     "browseAssets": "Browse Assets",
-    "noAssetsFound": "No assets found",
-    "tryAdjustingFilters": "Try adjusting your search or filters",
-    "loadingModels": "Loading {type}...",
+    "checkpoints": "Checkpoints",
+    "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>",
+    "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
+    "civitaiLinkPlaceholder": "Paste link here",
+    "confirmModelDetails": "Confirm Model Details",
     "connectionError": "Please check your connection and try again",
+    "errorFileTooLarge": "File exceeds the maximum allowed size limit",
+    "errorFormatNotAllowed": "Only SafeTensor format is allowed",
+    "errorModelTypeNotSupported": "This model type is not supported",
+    "errorUnknown": "An unexpected error occurred",
+    "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file",
+    "errorUnsafeVirusScan": "CivitAI detected malware or suspicious content in this file",
+    "errorUploadFailed": "Failed to import asset. Please try again.",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
+    "fileFormats": "File formats",
+    "fileName": "File Name",
+    "fileSize": "File Size",
+    "filterBy": "Filter by",
+    "findInLibrary": "Find it in the {type} section of the models library.",
+    "finish": "Finish",
+    "jobId": "Job ID",
+    "loadingModels": "Loading {type}...",
+    "modelAssociatedWithLink": "The model associated with the link you provided:",
+    "modelName": "Model Name",
+    "modelNamePlaceholder": "Enter a name for this model",
+    "modelTypeSelectorLabel": "What type of model is this?",
+    "modelTypeSelectorPlaceholder": "Select model type",
+    "modelUploaded": "Model imported! 🎉",
+    "noAssetsFound": "No assets found",
     "noModelsInFolder": "No {type} available in this folder",
-    "uploadModel": "Import",
-    "uploadModelFromCivitai": "Import a model from Civitai",
-    "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
+    "notSureLeaveAsIs": "Not sure? Just leave this as is",
     "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
+    "selectFrameworks": "Select Frameworks",
+    "selectModelType": "Select model type",
+    "selectProjects": "Select Projects",
+    "sortAZ": "A-Z",
+    "sortBy": "Sort by",
+    "sortingType": "Sorting Type",
+    "sortPopular": "Popular",
+    "sortRecent": "Recent",
+    "sortZA": "Z-A",
+    "tags": "Tags",
+    "tagsHelp": "Separate tags with commas",
+    "tagsPlaceholder": "e.g., models, checkpoint",
+    "tryAdjustingFilters": "Try adjusting your search or filters",
+    "unknown": "Unknown",
+    "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.",
+    "upgradeToUnlockFeature": "Upgrade to unlock this feature",
+    "upload": "Import",
+    "uploadFailed": "Import failed",
+    "uploadingModel": "Importing model...",
+    "uploadModel": "Import",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
     "uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment",
     "uploadModelDescription3": "Max file size: <strong>1 GB</strong>",
-    "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
-    "civitaiLinkPlaceholder": "Paste link here",
-    "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>",
-    "confirmModelDetails": "Confirm Model Details",
-    "fileName": "File Name",
-    "fileSize": "File Size",
-    "modelName": "Model Name",
-    "modelNamePlaceholder": "Enter a name for this model",
-    "tags": "Tags",
-    "tagsPlaceholder": "e.g., models, checkpoint",
-    "tagsHelp": "Separate tags with commas",
-    "upload": "Import",
-    "uploadingModel": "Importing model...",
-    "uploadSuccess": "Model imported successfully!",
-    "uploadFailed": "Import failed",
+    "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
+    "uploadModelFromCivitai": "Import a model from Civitai",
     "uploadModelHelpVideo": "Upload Model Help Video",
     "uploadModelHowDoIFindThis": "How do I find this?",
-    "modelAssociatedWithLink": "The model associated with the link you provided:",
-    "modelTypeSelectorLabel": "What type of model is this?",
-    "modelTypeSelectorPlaceholder": "Select model type",
-    "selectModelType": "Select model type",
-    "notSureLeaveAsIs": "Not sure? Just leave this as is",
-    "modelUploaded": "Model imported! 🎉",
-    "findInLibrary": "Find it in the {type} section of the models library.",
-    "finish": "Finish",
-    "upgradeToUnlockFeature": "Upgrade to unlock this feature",
-    "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.",
-    "allModels": "All Models",
-    "allCategory": "All {category}",
-    "unknown": "Unknown",
-    "fileFormats": "File formats",
-    "baseModels": "Base models",
-    "filterBy": "Filter by",
-    "sortBy": "Sort by",
-    "sortAZ": "A-Z",
-    "sortZA": "Z-A",
-    "sortRecent": "Recent",
-    "sortPopular": "Popular",
-    "selectFrameworks": "Select Frameworks",
-    "selectProjects": "Select Projects",
-    "sortingType": "Sorting Type",
-    "errorFileTooLarge": "File exceeds the maximum allowed size limit",
-    "errorFormatNotAllowed": "Only SafeTensor format is allowed",
-    "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file",
-    "errorUnsafeVirusScan": "CivitAI detected malware or suspicious content in this file",
-    "errorModelTypeNotSupported": "This model type is not supported",
-    "errorUnknown": "An unexpected error occurred",
-    "errorUploadFailed": "Failed to import asset. Please try again.",
+    "uploadSuccess": "Model imported successfully!",
     "ariaLabel": {
       "assetCard": "{name} - {type} asset",
       "loadingAsset": "Loading asset"
@@ -2274,6 +2287,12 @@
     "inputs": "INPUTS",
     "inputsNone": "NO INPUTS",
     "inputsNoneTooltip": "Node has no inputs",
-    "nodeState": "Node state"
+    "properties": "Properties",
+    "nodeState": "Node state",
+    "settings": "Settings"
+  },
+  "help": {
+    "recentReleases": "Recent releases",
+    "helpCenterMenu": "Help Center Menu"
   }
-}
\ No newline at end of file
+}
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 9150162c3..61ac1976b 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-3 pt-2">
+  <div class="flex gap-3">
     <SearchBox
       :model-value="searchQuery"
       :placeholder="$t('sideToolbar.searchAssets')"
diff --git a/src/platform/updates/common/releaseStore.ts b/src/platform/updates/common/releaseStore.ts
index 3e2849259..80c2bc05d 100644
--- a/src/platform/updates/common/releaseStore.ts
+++ b/src/platform/updates/common/releaseStore.ts
@@ -1,6 +1,6 @@
 import { until } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { compare } from 'semver'
+import { compare, valid } from 'semver'
 import { computed, ref } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
@@ -24,10 +24,12 @@ export const useReleaseStore = defineStore('release', () => {
   const systemStatsStore = useSystemStatsStore()
   const settingStore = useSettingStore()
 
-  // Current ComfyUI version
-  const currentComfyUIVersion = computed(
-    () => systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
-  )
+  const currentVersion = computed(() => {
+    if (isCloud) {
+      return systemStatsStore?.systemStats?.system?.cloud_version ?? ''
+    }
+    return systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
+  })
 
   // Release data from settings
   const locale = computed(() => settingStore.get('Comfy.Locale'))
@@ -55,22 +57,33 @@ export const useReleaseStore = defineStore('release', () => {
   // Helper constants
   const THREE_DAYS_MS = 3 * 24 * 60 * 60 * 1000 // 3 days
 
+  const compareVersions = (
+    releaseVersion: string,
+    currentVer: string
+  ): number => {
+    if (valid(releaseVersion) && valid(currentVer)) {
+      return compare(releaseVersion, currentVer)
+    }
+    // Non-semver (e.g. git hash): assume different = newer
+    return releaseVersion === currentVer ? 0 : 1
+  }
+
   // New version available?
   const isNewVersionAvailable = computed(
     () =>
       !!recentRelease.value &&
-      compare(
+      compareVersions(
         recentRelease.value.version,
-        currentComfyUIVersion.value || '0.0.0'
+        currentVersion.value || '0.0.0'
       ) > 0
   )
 
   const isLatestVersion = computed(
     () =>
       !!recentRelease.value &&
-      compare(
+      compareVersions(
         recentRelease.value.version,
-        currentComfyUIVersion.value || '0.0.0'
+        currentVersion.value || '0.0.0'
       ) === 0
   )
 
@@ -158,23 +171,25 @@ export const useReleaseStore = defineStore('release', () => {
     return true
   })
 
-  // Show "What's New" popup
   const shouldShowPopup = computed(() => {
-    // Only show on desktop version
-    if (!isElectron() || isCloud) {
+    if (!isElectron() && !isCloud) {
       return false
     }
 
-    // Skip if notifications are disabled
     if (!showVersionUpdates.value) {
       return false
     }
 
-    if (!isLatestVersion.value) {
+    if (!recentRelease.value) {
+      return false
+    }
+
+    // Skip version check if current version isn't semver (e.g. git hash)
+    const skipVersionCheck = !valid(currentVersion.value)
+    if (!skipVersionCheck && !isLatestVersion.value) {
       return false
     }
 
-    // Hide if already seen
     if (
       releaseVersion.value === recentRelease.value.version &&
       releaseStatus.value === "what's new seen"
@@ -225,8 +240,7 @@ export const useReleaseStore = defineStore('release', () => {
       return
     }
 
-    // Skip fetching if notifications are disabled
-    if (!showVersionUpdates.value) {
+    if (!isCloud && !showVersionUpdates.value) {
       return
     }
 
@@ -248,8 +262,8 @@ export const useReleaseStore = defineStore('release', () => {
       }
 
       const fetchedReleases = await releaseService.getReleases({
-        project: 'comfyui',
-        current_version: currentComfyUIVersion.value,
+        project: isCloud ? 'cloud' : 'comfyui',
+        current_version: currentVersion.value,
         form_factor: systemStatsStore.getFormFactor(),
         locale: stringToLocale(locale.value)
       })
diff --git a/src/platform/updates/components/ReleaseNotificationToast.stories.ts b/src/platform/updates/components/ReleaseNotificationToast.stories.ts
new file mode 100644
index 000000000..95fc837e3
--- /dev/null
+++ b/src/platform/updates/components/ReleaseNotificationToast.stories.ts
@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { ReleaseNote } from '../common/releaseService'
+import { useReleaseStore } from '../common/releaseStore'
+import ReleaseNotificationToast from './ReleaseNotificationToast.vue'
+
+// Mock release data with realistic CMS content
+const mockReleases: ReleaseNote[] = [
+  {
+    id: 1,
+    project: 'comfyui',
+    version: '1.2.3',
+    attention: 'medium',
+    published_at: '2024-01-15T10:00:00Z',
+    content: `# ComfyUI 1.2.3 Release
+
+**What's new**
+
+New features and improvements for better workflow management.
+
+- **Enhanced Node Editor**: Improved performance for large workflows with 100+ nodes
+- **Auto-save Feature**: Your work is now automatically saved every 30 seconds 
+- **New Model Support**: Added support for FLUX.1-dev and FLUX.1-schnell models
+- **Bug Fixes**: Resolved memory leak issues in the backend processing`
+  },
+  {
+    id: 2,
+    project: 'comfyui',
+    version: '1.2.4',
+    attention: 'high',
+    published_at: '2024-02-01T14:30:00Z',
+    content: `# ComfyUI 1.2.4 Major Release
+
+**What's new**
+
+Revolutionary updates that change how you create with ComfyUI.
+
+- **Real-time Collaboration**: Share and edit workflows with your team in real-time
+- **Advanced Upscaling**: New ESRGAN and Real-ESRGAN models built-in
+- **Custom Node Store**: Browse and install community nodes directly from the interface
+- **Performance Boost**: 40% faster generation times for SDXL models
+- **Dark Mode**: Beautiful new dark interface theme`
+  },
+  {
+    id: 3,
+    project: 'comfyui',
+    version: '1.3.0',
+    attention: 'high',
+    published_at: '2024-03-10T09:15:00Z',
+    content: `# ComfyUI 1.3.0 - The Biggest Update Yet
+
+**What's new**
+
+Introducing powerful new features that unlock creative possibilities.
+
+- **AI-Powered Node Suggestions**: Get intelligent recommendations while building workflows
+- **Workflow Templates**: Start from professionally designed templates 
+- **Advanced Queuing**: Batch process multiple generations with queue management
+- **Mobile Preview**: Preview your workflows on mobile devices
+- **API Improvements**: Enhanced REST API with better documentation
+- **Community Hub**: Share workflows and discover creations from other users`
+  }
+]
+
+interface StoryArgs {
+  releaseData: ReleaseNote
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Platform/Updates/ReleaseNotificationToast',
+  component: ReleaseNotificationToast,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' }
+  },
+  argTypes: {
+    releaseData: {
+      control: 'object',
+      description: 'Release data with version and markdown content'
+    }
+  },
+  decorators: [
+    (_, context) => {
+      // Set up the store with mock data for this story
+      const releaseStore = useReleaseStore()
+
+      // Patch store state directly for Storybook
+      releaseStore.$patch({
+        releases: [context.args.releaseData]
+      })
+      // Override shouldShowToast getter for Storybook
+      Object.defineProperty(releaseStore, 'shouldShowToast', {
+        get: () => true,
+        configurable: true
+      })
+      // Override recentRelease getter for Storybook
+      Object.defineProperty(releaseStore, 'recentRelease', {
+        get: () => context.args.releaseData,
+        configurable: true
+      })
+
+      // Mock the store methods to prevent errors
+      releaseStore.handleSkipRelease = async () => {
+        // Mock implementation for Storybook
+      }
+      releaseStore.handleShowChangelog = async () => {
+        // Mock implementation for Storybook
+      }
+
+      return {
+        template: `
+          <div class="min-h-screen flex items-center justify-center bg-base-background p-8">
+            <story />
+          </div>
+        `
+      }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    releaseData: mockReleases[0]
+  }
+}
+
+export const MajorRelease: Story = {
+  args: {
+    releaseData: mockReleases[1]
+  }
+}
+
+export const ExtensiveFeatures: Story = {
+  args: {
+    releaseData: mockReleases[2]
+  }
+}
+
+export const LongContent: Story = {
+  args: {
+    releaseData: {
+      id: 4,
+      project: 'comfyui',
+      version: '1.4.0',
+      attention: 'high',
+      published_at: '2024-04-05T11:00:00Z',
+      content: `# ComfyUI 1.4.0 - Comprehensive Update
+
+**What's new**
+
+This is a comprehensive update with many new features and improvements. This release includes extensive changes across the entire platform.
+
+- **Revolutionary Workflow Engine**: Complete rewrite of the workflow processing engine with 300% performance improvements
+- **Advanced Model Management**: Sophisticated model organization with tagging, favorites, and automatic duplicate detection
+- **Real-time Collaboration Suite**: Complete collaboration platform with user management, permissions, and shared workspaces
+- **Professional Animation Tools**: Timeline-based animation system with keyframes and interpolation
+- **Cloud Integration**: Seamless cloud storage integration with automatic backup and sync
+- **Advanced Debugging Tools**: Comprehensive debugging suite with step-through execution and variable inspection`
+    }
+  }
+}
+
+export const EmptyContent: Story = {
+  args: {
+    releaseData: {
+      id: 5,
+      project: 'comfyui',
+      version: '1.0.0',
+      attention: 'low',
+      published_at: '2024-01-01T00:00:00Z',
+      content: ''
+    }
+  }
+}
diff --git a/src/platform/updates/components/ReleaseNotificationToast.test.ts b/src/platform/updates/components/ReleaseNotificationToast.test.ts
new file mode 100644
index 000000000..021772ae2
--- /dev/null
+++ b/src/platform/updates/components/ReleaseNotificationToast.test.ts
@@ -0,0 +1,283 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ReleaseNote } from '../common/releaseService'
+import ReleaseNotificationToast from './ReleaseNotificationToast.vue'
+
+// Mock dependencies
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    locale: { value: 'en' },
+    t: vi.fn((key: string) => {
+      const translations: Record<string, string> = {
+        'releaseToast.newVersionAvailable': 'New update is out!',
+        'releaseToast.whatsNew': "See what's new",
+        'releaseToast.skip': 'Skip',
+        'releaseToast.update': 'Update',
+        'releaseToast.description':
+          'Check out the latest improvements and features in this update.'
+      }
+      return translations[key] || key
+    })
+  })),
+  createI18n: vi.fn(() => ({
+    global: {
+      locale: { value: 'en' }
+    }
+  }))
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  formatVersionAnchor: vi.fn((version: string) => version.replace(/\./g, ''))
+}))
+
+vi.mock('@/utils/markdownRendererUtil', () => ({
+  renderMarkdownToHtml: vi.fn((content: string) => `<div>${content}</div>`)
+}))
+
+// Mock release store
+const mockReleaseStore = {
+  recentRelease: null as ReleaseNote | null,
+  shouldShowToast: false,
+  handleSkipRelease: vi.fn(),
+  handleShowChangelog: vi.fn(),
+  releases: [],
+  fetchReleases: vi.fn()
+}
+
+vi.mock('../common/releaseStore', () => ({
+  useReleaseStore: vi.fn(() => mockReleaseStore)
+}))
+
+describe('ReleaseNotificationToast', () => {
+  let wrapper: VueWrapper<InstanceType<typeof ReleaseNotificationToast>>
+
+  const mountComponent = (props = {}) => {
+    return mount(ReleaseNotificationToast, {
+      global: {
+        mocks: {
+          $t: (key: string) => {
+            const translations: Record<string, string> = {
+              'releaseToast.newVersionAvailable': 'New update is out!',
+              'releaseToast.whatsNew': "See what's new",
+              'releaseToast.skip': 'Skip',
+              'releaseToast.update': 'Update',
+              'releaseToast.description':
+                'Check out the latest improvements and features in this update.'
+            }
+            return translations[key] || key
+          }
+        },
+        stubs: {
+          // Stub Lucide icons
+          'i-lucide-rocket': true,
+          'i-lucide-external-link': true
+        }
+      },
+      props
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset store state
+    mockReleaseStore.recentRelease = null
+    mockReleaseStore.shouldShowToast = true // Force show for testing
+  })
+
+  it('renders correctly when shouldShow is true', () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release\n\nSome content'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
+  })
+
+  it('displays rocket icon', () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+    expect(wrapper.find('.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+  })
+
+  it('displays release version', () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+    expect(wrapper.text()).toContain('1.2.3')
+  })
+
+  it('calls handleSkipRelease when skip button is clicked', async () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    const buttons = wrapper.findAll('button')
+    const skipButton = buttons.find(
+      (btn) =>
+        btn.text().includes('Skip') || btn.element.innerHTML.includes('skip')
+    )
+    expect(skipButton).toBeDefined()
+    await skipButton!.trigger('click')
+
+    expect(mockReleaseStore.handleSkipRelease).toHaveBeenCalledWith('1.2.3')
+  })
+
+  it('opens update URL when update button is clicked', async () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    // Mock window.open
+    const mockWindowOpen = vi.fn()
+    Object.defineProperty(window, 'open', {
+      value: mockWindowOpen,
+      writable: true
+    })
+
+    wrapper = mountComponent()
+
+    // Call the handler directly instead of triggering DOM event
+    await wrapper.vm.handleUpdate()
+
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      'https://docs.comfy.org/installation/update_comfyui',
+      '_blank'
+    )
+  })
+
+  it('calls handleShowChangelog when learn more link is clicked', async () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Call the handler directly instead of triggering DOM event
+    await wrapper.vm.handleLearnMore()
+
+    expect(mockReleaseStore.handleShowChangelog).toHaveBeenCalledWith('1.2.3')
+  })
+
+  it('generates correct changelog URL', () => {
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    const learnMoreLink = wrapper.find('a[target="_blank"]')
+    expect(learnMoreLink.exists()).toBe(true)
+    expect(learnMoreLink.attributes('href')).toContain(
+      'docs.comfy.org/changelog'
+    )
+  })
+
+  it('removes title from markdown content for toast display', async () => {
+    const mockMarkdownRendererModule = (await vi.importMock(
+      '@/utils/markdownRendererUtil'
+    )) as { renderMarkdownToHtml: ReturnType<typeof vi.fn> }
+    const mockMarkdownRenderer = vi.mocked(
+      mockMarkdownRendererModule.renderMarkdownToHtml
+    )
+    mockMarkdownRenderer.mockReturnValue('<div>Content without title</div>')
+
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release Title\n\nSome content'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Should call markdown renderer with title removed
+    expect(mockMarkdownRenderer).toHaveBeenCalledWith('\n\nSome content')
+  })
+
+  it('fetches releases on mount when not already loaded', async () => {
+    mockReleaseStore.releases = [] // Empty releases array
+
+    wrapper = mountComponent()
+
+    expect(mockReleaseStore.fetchReleases).toHaveBeenCalled()
+  })
+
+  it('handles missing release content gracefully', () => {
+    mockReleaseStore.shouldShowToast = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: ''
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Should render fallback content
+    const descriptionElement = wrapper.find('.pl-14')
+    expect(descriptionElement.exists()).toBe(true)
+    expect(descriptionElement.text()).toContain('Check out the latest')
+  })
+
+  it('auto-hides after timeout', async () => {
+    vi.useFakeTimers()
+
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Initially visible
+    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
+
+    // Fast-forward time to trigger auto-hide
+    vi.advanceTimersByTime(8000)
+    await wrapper.vm.$nextTick()
+
+    // Component should call dismissToast internally which hides it
+    // We can't test DOM visibility change because the component uses local state
+    // But we can verify the timer was set and would have triggered
+    expect(vi.getTimerCount()).toBe(0) // Timer should be cleared after auto-hide
+
+    vi.useRealTimers()
+  })
+
+  it('clears auto-hide timer when manually dismissed', async () => {
+    vi.useFakeTimers()
+
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Start the timer
+    vi.advanceTimersByTime(1000)
+
+    // Manually dismiss by calling handler directly
+    await wrapper.vm.handleSkip()
+
+    // Timer should be cleared
+    expect(vi.getTimerCount()).toBe(0)
+
+    // Verify the store method was called (manual dismissal)
+    expect(mockReleaseStore.handleSkipRelease).toHaveBeenCalled()
+
+    vi.useRealTimers()
+  })
+})
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index 4b48b6fe0..3e88a0751 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -1,43 +1,63 @@
 <template>
   <div v-if="shouldShow" class="release-toast-popup">
-    <div class="release-notification-toast">
-      <!-- Header section with icon and text -->
-      <div class="toast-header">
-        <div class="toast-icon">
-          <i class="pi pi-download" />
-        </div>
-        <div class="toast-text">
-          <div class="toast-title">
-            {{ $t('releaseToast.newVersionAvailable') }}
+    <div
+      class="w-96 max-h-96 bg-base-background border border-border-default rounded-lg shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)] flex flex-col"
+    >
+      <!-- Main content -->
+      <div class="p-4 flex flex-col gap-4 flex-1 min-h-0">
+        <!-- Header section with icon and text -->
+        <div class="flex items-center gap-4">
+          <div
+            class="p-3 bg-primary-background-hover rounded-lg flex items-center justify-center shrink-0"
+          >
+            <i class="icon-[lucide--rocket] w-4 h-4 text-white" />
           </div>
-          <div class="toast-version-badge">
-            {{ latestRelease?.version }}
+          <div class="flex flex-col gap-1">
+            <div
+              class="text-sm font-normal text-base-foreground leading-[1.429]"
+            >
+              {{ $t('releaseToast.newVersionAvailable') }}
+            </div>
+            <div
+              class="text-sm font-normal text-muted-foreground leading-[1.21]"
+            >
+              {{ latestRelease?.version }}
+            </div>
           </div>
         </div>
+
+        <!-- Description section -->
+        <div
+          class="pl-14 text-sm font-normal text-muted-foreground leading-[1.21] overflow-y-auto flex-1 min-h-0"
+          v-html="formattedContent"
+        ></div>
       </div>
 
-      <!-- Actions section -->
-      <div class="toast-actions-section">
-        <div class="actions-row">
-          <div class="left-actions">
-            <a
-              class="learn-more-link"
-              :href="changelogUrl"
-              target="_blank"
-              rel="noopener,noreferrer"
-              @click="handleLearnMore"
-            >
-              {{ $t('releaseToast.whatsNew') }}
-            </a>
-          </div>
-          <div class="right-actions">
-            <button class="skip-button" @click="handleSkip">
-              {{ $t('releaseToast.skip') }}
-            </button>
-            <button class="cta-button" @click="handleUpdate">
-              {{ $t('releaseToast.update') }}
-            </button>
-          </div>
+      <!-- Footer section -->
+      <div class="flex justify-between items-center px-4 pb-4">
+        <a
+          class="flex items-center gap-2 text-sm font-normal py-1 text-muted-foreground hover:text-base-foreground"
+          :href="changelogUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          @click="handleLearnMore"
+        >
+          <i class="icon-[lucide--external-link] w-4 h-4"></i>
+          {{ $t('releaseToast.whatsNew') }}
+        </a>
+        <div class="flex items-center gap-4">
+          <button
+            class="h-6 px-0 bg-transparent border-none text-sm font-normal text-muted-foreground hover:text-base-foreground cursor-pointer"
+            @click="handleSkip"
+          >
+            {{ $t('releaseToast.skip') }}
+          </button>
+          <button
+            class="h-10 px-4 bg-secondary-background hover:bg-secondary-background-hover rounded-lg border-none text-sm font-normal text-base-foreground cursor-pointer"
+            @click="handleUpdate"
+          >
+            {{ $t('releaseToast.update') }}
+          </button>
         </div>
       </div>
     </div>
@@ -45,24 +65,28 @@
 </template>
 
 <script setup lang="ts">
+import { default as DOMPurify } from 'dompurify'
 import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useExternalLink } from '@/composables/useExternalLink'
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
 
 const { buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
+const { t } = useI18n()
 
 // Local state for dismissed status
 const isDismissed = ref(false)
 
 // Get latest release from store
-const latestRelease = computed<ReleaseNote | null>(
-  () => releaseStore.recentRelease
-)
+const latestRelease = computed<ReleaseNote | null>(() => {
+  return releaseStore.recentRelease
+})
 
 // Show toast when new version available and not dismissed
 const shouldShow = computed(
@@ -79,6 +103,38 @@ const changelogUrl = computed(() => {
   return changelogBaseUrl
 })
 
+const formattedContent = computed(() => {
+  if (!latestRelease.value?.content) {
+    return DOMPurify.sanitize(`<p>${t('releaseToast.description')}</p>`)
+  }
+
+  try {
+    const markdown = latestRelease.value.content
+    // Remove the h1 title line and images for toast mode
+    const contentWithoutTitle = markdown.replace(/^# .+$/m, '')
+    const contentWithoutImages = contentWithoutTitle.replace(
+      /!\[.*?\]\(.*?\)/g,
+      ''
+    )
+
+    // Check if there's meaningful content left after cleanup
+    const trimmedContent = contentWithoutImages.trim()
+    if (!trimmedContent || trimmedContent.replace(/\s+/g, '') === '') {
+      return DOMPurify.sanitize(`<p>${t('releaseToast.description')}</p>`)
+    }
+
+    // renderMarkdownToHtml already sanitizes with DOMPurify, so this is safe
+    return renderMarkdownToHtml(contentWithoutImages)
+  } catch (error) {
+    console.error('Error parsing markdown:', error)
+    // Fallback to plain text with line breaks - sanitize the HTML we create
+    const fallbackContent = latestRelease.value.content.replace(/\n/g, '<br>')
+    return fallbackContent.trim()
+      ? DOMPurify.sanitize(fallbackContent)
+      : DOMPurify.sanitize(`<p>${t('releaseToast.description')}</p>`)
+  }
+})
+
 // Auto-hide timer
 let hideTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -124,8 +180,6 @@ const handleUpdate = () => {
   dismissToast()
 }
 
-// Learn more handled by anchor href
-
 // Start auto-hide when toast becomes visible
 watch(shouldShow, (isVisible) => {
   if (isVisible) {
@@ -142,6 +196,13 @@ onMounted(async () => {
     await releaseStore.fetchReleases()
   }
 })
+
+// Expose methods for testing
+defineExpose({
+  handleSkip,
+  handleLearnMore,
+  handleUpdate
+})
 </script>
 
 <style scoped>
@@ -154,10 +215,7 @@ onMounted(async () => {
 }
 
 /* Sidebar positioning classes applied by parent - matching help center */
-.release-toast-popup.sidebar-left {
-  left: 1rem;
-}
-
+.release-toast-popup.sidebar-left,
 .release-toast-popup.sidebar-left.small-sidebar {
   left: 1rem;
 }
@@ -165,144 +223,4 @@ onMounted(async () => {
 .release-toast-popup.sidebar-right {
   right: 1rem;
 }
-
-/* Main toast container */
-.release-notification-toast {
-  width: 448px;
-  padding: 16px 16px 8px;
-  background: #353535;
-  box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
-  border-radius: 12px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* Header section */
-.toast-header {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-
-/* Icon container */
-.toast-icon {
-  width: 42px;
-  height: 42px;
-  padding: 10px;
-  background: rgb(0 122 255 / 0.2);
-  border-radius: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.toast-icon i {
-  color: #007aff;
-  font-size: 16px;
-}
-
-/* Text content */
-.toast-text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4px;
-}
-
-.toast-title {
-  color: white;
-  font-size: 14px;
-  font-family: 'Satoshi', sans-serif;
-  font-weight: 500;
-  line-height: 18.2px;
-}
-
-.toast-version-badge {
-  color: #a0a1a2;
-  font-size: 12px;
-  font-family: 'Satoshi', sans-serif;
-  font-weight: 500;
-  line-height: 15.6px;
-}
-
-/* Actions section */
-.toast-actions-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.actions-row {
-  padding-left: 58px; /* Align with text content */
-  padding-right: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.left-actions {
-  display: flex;
-  align-items: center;
-}
-
-/* Learn more link - simple text link */
-.learn-more-link {
-  color: #60a5fa;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  line-height: 15.6px;
-  text-decoration: none;
-}
-
-.learn-more-link:hover {
-  text-decoration: underline;
-}
-
-.right-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-/* Button styles */
-.skip-button {
-  padding: 8px 16px;
-  background: #353535;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
-  border: none;
-  color: #aeaeb2;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.skip-button:hover {
-  background: #404040;
-}
-
-.cta-button {
-  padding: 8px 16px;
-  background: white;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
-  border: none;
-  color: black;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.cta-button:hover {
-  background: #f0f0f0;
-}
 </style>
diff --git a/src/platform/updates/components/WhatsNewPopup.stories.ts b/src/platform/updates/components/WhatsNewPopup.stories.ts
new file mode 100644
index 000000000..e68c42dc8
--- /dev/null
+++ b/src/platform/updates/components/WhatsNewPopup.stories.ts
@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { ReleaseNote } from '../common/releaseService'
+import { useReleaseStore } from '../common/releaseStore'
+import WhatsNewPopup from './WhatsNewPopup.vue'
+
+// Mock release data with realistic CMS content
+const mockReleases: ReleaseNote[] = [
+  {
+    id: 1,
+    project: 'comfyui',
+    version: '1.2.3',
+    attention: 'medium',
+    published_at: '2024-01-15T10:00:00Z',
+    content: `# ComfyUI 1.2.3 Release
+
+**What's new**
+
+New features and improvements for better workflow management.
+
+- **Enhanced Node Editor**: Improved performance for large workflows with 100+ nodes
+- **Auto-save Feature**: Your work is now automatically saved every 30 seconds 
+- **New Model Support**: Added support for FLUX.1-dev and FLUX.1-schnell models
+- **Bug Fixes**: Resolved memory leak issues in the backend processing`
+  },
+  {
+    id: 2,
+    project: 'comfyui',
+    version: '1.2.4',
+    attention: 'high',
+    published_at: '2024-02-01T14:30:00Z',
+    content: `![Featured Image](https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&h=200&fit=crop&fm=jpg)
+
+# ComfyUI 1.2.4 Major Release
+
+**What's new**
+
+Revolutionary updates that change how you create with ComfyUI.
+
+- **Real-time Collaboration**: Share and edit workflows with your team in real-time
+- **Advanced Upscaling**: New ESRGAN and Real-ESRGAN models built-in
+- **Custom Node Store**: Browse and install community nodes directly from the interface
+- **Performance Boost**: 40% faster generation times for SDXL models
+- **Dark Mode**: Beautiful new dark interface theme`
+  },
+  {
+    id: 3,
+    project: 'comfyui',
+    version: '1.3.0',
+    attention: 'high',
+    published_at: '2024-03-10T09:15:00Z',
+    content: `![Release Image](https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=200&fit=crop&fm=jpg)
+
+# ComfyUI 1.3.0 - The Biggest Update Yet
+
+**What's new**
+
+Introducing powerful new features that unlock creative possibilities.
+
+- **AI-Powered Node Suggestions**: Get intelligent recommendations while building workflows
+- **Workflow Templates**: Start from professionally designed templates 
+- **Advanced Queuing**: Batch process multiple generations with queue management
+- **Mobile Preview**: Preview your workflows on mobile devices
+- **API Improvements**: Enhanced REST API with better documentation
+- **Community Hub**: Share workflows and discover creations from other users`
+  }
+]
+
+interface StoryArgs {
+  releaseData: ReleaseNote
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Platform/Updates/WhatsNewPopup',
+  component: WhatsNewPopup,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' }
+  },
+  argTypes: {
+    releaseData: {
+      control: 'object',
+      description: 'Release data with version and markdown content'
+    }
+  },
+  decorators: [
+    (_story, context) => {
+      // Set up the store with mock data for this story
+      const releaseStore = useReleaseStore()
+
+      // Override store data with story args
+      releaseStore.releases = [context.args.releaseData]
+
+      // Force the computed properties to return the values we want
+      Object.defineProperty(releaseStore, 'recentRelease', {
+        value: context.args.releaseData,
+        writable: true
+      })
+      Object.defineProperty(releaseStore, 'shouldShowPopup', {
+        value: true,
+        writable: true
+      })
+
+      // Mock the store methods to prevent errors
+      releaseStore.handleWhatsNewSeen = async () => {
+        // Mock implementation for Storybook
+      }
+
+      return {
+        template: `
+          <div class="min-h-screen flex items-center justify-center bg-gray-900 p-8">
+            <story />
+          </div>
+        `
+      }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    releaseData: mockReleases[0]
+  }
+}
+
+export const WithImage: Story = {
+  args: {
+    releaseData: mockReleases[1]
+  }
+}
+
+export const MajorRelease: Story = {
+  args: {
+    releaseData: mockReleases[2]
+  }
+}
+
+export const LongContent: Story = {
+  args: {
+    releaseData: {
+      id: 4,
+      project: 'comfyui',
+      version: '2.0.0',
+      attention: 'high',
+      published_at: '2024-04-20T16:00:00Z',
+      content: `![Major Update](https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&h=200&fit=crop)
+
+# ComfyUI 2.0.0 - Complete Rewrite
+
+**What's new**
+
+The most significant update in ComfyUI history with complete platform rewrite.
+
+## Core Engine Improvements
+
+- **Next-Generation Workflow Engine**: Completely rewritten from the ground up with 500% performance improvements for complex workflows
+- **Advanced Memory Management**: Intelligent memory allocation reducing VRAM usage by up to 60% while maintaining quality
+- **Multi-Threading Support**: Full multi-core CPU utilization for preprocessing and post-processing tasks
+- **GPU Optimization**: Advanced GPU scheduling with automatic optimization for different hardware configurations
+
+## New User Interface
+
+- **Modern Design Language**: Beautiful new interface with improved accessibility and mobile responsiveness
+- **Customizable Workspace**: Fully customizable layout with dockable panels and saved workspace configurations
+- **Advanced Node Browser**: Intelligent node search with AI-powered suggestions and visual node previews
+- **Real-time Preview**: Live preview of changes as you build your workflow without needing to execute
+
+## Professional Features
+
+- **Version Control Integration**: Native Git integration for workflow version control and collaboration
+- **Enterprise Security**: Advanced security features including end-to-end encryption and audit logging
+- **Scalable Architecture**: Designed to handle enterprise-scale deployments with thousands of concurrent users
+- **Plugin Ecosystem**: Robust plugin system with hot-loading and automatic dependency management`
+    }
+  }
+}
+
+export const MinimalContent: Story = {
+  args: {
+    releaseData: {
+      id: 5,
+      project: 'comfyui',
+      version: '1.0.1',
+      attention: 'low',
+      published_at: '2024-01-05T12:00:00Z',
+      content: `# ComfyUI 1.0.1
+
+**What's new**
+
+Quick patch release.
+
+- **Bug Fix**: Fixed critical save issue`
+    }
+  }
+}
+
+export const EmptyContent: Story = {
+  args: {
+    releaseData: {
+      id: 6,
+      project: 'comfyui',
+      version: '1.0.0',
+      attention: 'low',
+      published_at: '2024-01-01T00:00:00Z',
+      content: ''
+    }
+  }
+}
diff --git a/src/platform/updates/components/WhatsNewPopup.test.ts b/src/platform/updates/components/WhatsNewPopup.test.ts
new file mode 100644
index 000000000..4d2f7ee90
--- /dev/null
+++ b/src/platform/updates/components/WhatsNewPopup.test.ts
@@ -0,0 +1,213 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ReleaseNote } from '../common/releaseService'
+import WhatsNewPopup from './WhatsNewPopup.vue'
+
+// Mock dependencies
+const mockTranslations: Record<string, string> = {
+  'g.close': 'Close',
+  'whatsNewPopup.later': 'Later',
+  'whatsNewPopup.learnMore': 'Learn More',
+  'whatsNewPopup.noReleaseNotes': 'No release notes available'
+}
+
+vi.mock('@/i18n', () => ({
+  i18n: {
+    global: {
+      locale: {
+        value: 'en'
+      }
+    }
+  },
+  t: (key: string, params?: Record<string, string>) => {
+    return params
+      ? `${mockTranslations[key] || key}:${JSON.stringify(params)}`
+      : mockTranslations[key] || key
+  },
+  d: (date: Date) => date.toLocaleDateString()
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    locale: { value: 'en' },
+    t: vi.fn((key: string) => {
+      return mockTranslations[key] || key
+    })
+  }))
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  formatVersionAnchor: vi.fn((version: string) => version.replace(/\./g, ''))
+}))
+
+vi.mock('@/utils/markdownRendererUtil', () => ({
+  renderMarkdownToHtml: vi.fn((content: string) => `<div>${content}</div>`)
+}))
+
+// Mock release store
+const mockReleaseStore = {
+  recentRelease: null as ReleaseNote | null,
+  shouldShowPopup: false,
+  handleWhatsNewSeen: vi.fn(),
+  releases: [] as ReleaseNote[],
+  fetchReleases: vi.fn()
+}
+
+vi.mock('../common/releaseStore', () => ({
+  useReleaseStore: vi.fn(() => mockReleaseStore)
+}))
+
+describe('WhatsNewPopup', () => {
+  let wrapper: VueWrapper
+
+  const mountComponent = (props = {}) => {
+    return mount(WhatsNewPopup, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Button },
+        mocks: {
+          $t: (key: string) => {
+            return mockTranslations[key] || key
+          }
+        },
+        stubs: {
+          // Stub Lucide icons
+          'i-lucide-x': true,
+          'i-lucide-external-link': true
+        }
+      },
+      props
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset store state
+    mockReleaseStore.recentRelease = null
+    mockReleaseStore.shouldShowPopup = false
+    mockReleaseStore.releases = []
+    mockReleaseStore.handleWhatsNewSeen = vi.fn()
+    mockReleaseStore.fetchReleases = vi.fn()
+  })
+
+  it('renders correctly when shouldShow is true', () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release\n\nSome content'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+    expect(wrapper.find('.whats-new-popup').exists()).toBe(true)
+  })
+
+  it('does not render when shouldShow is false', () => {
+    mockReleaseStore.shouldShowPopup = false
+    wrapper = mountComponent()
+    expect(wrapper.find('.whats-new-popup').exists()).toBe(false)
+  })
+
+  it('calls handleWhatsNewSeen when close button is clicked', async () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    const closeButton = wrapper.findComponent(Button)
+    await closeButton.trigger('click')
+
+    expect(mockReleaseStore.handleWhatsNewSeen).toHaveBeenCalledWith('1.2.3')
+  })
+
+  it('generates correct changelog URL', () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    const learnMoreLink = wrapper.find('.learn-more-link')
+    expect(learnMoreLink.attributes('href')).toContain(
+      'docs.comfy.org/changelog'
+    )
+  })
+
+  it('handles missing release content gracefully', () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: ''
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Should render fallback content
+    const contentElement = wrapper.find('.content-text')
+    expect(contentElement.exists()).toBe(true)
+  })
+
+  it('emits whats-new-dismissed event when popup is closed', async () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Test Release'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Call the close method directly instead of triggering DOM event
+    await (wrapper.vm as any).closePopup()
+
+    expect(wrapper.emitted('whats-new-dismissed')).toBeTruthy()
+  })
+
+  it('fetches releases on mount when not already loaded', async () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.releases = [] // Empty releases array
+
+    wrapper = mountComponent()
+
+    expect(mockReleaseStore.fetchReleases).toHaveBeenCalled()
+  })
+
+  it('does not fetch releases when already loaded', async () => {
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.releases = [{ version: '1.0.0' } as ReleaseNote] // Non-empty releases array
+
+    wrapper = mountComponent()
+
+    expect(mockReleaseStore.fetchReleases).not.toHaveBeenCalled()
+  })
+
+  it('processes markdown content correctly', async () => {
+    const mockMarkdownRendererModule = (await vi.importMock(
+      '@/utils/markdownRendererUtil'
+    )) as { renderMarkdownToHtml: ReturnType<typeof vi.fn> }
+    const mockMarkdownRenderer = vi.mocked(
+      mockMarkdownRendererModule.renderMarkdownToHtml
+    )
+    mockMarkdownRenderer.mockReturnValue('<h1>Processed Content</h1>')
+
+    mockReleaseStore.shouldShowPopup = true
+    mockReleaseStore.recentRelease = {
+      version: '1.2.3',
+      content: '# Original Title\n\nContent'
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Should call markdown renderer with original content (no modification)
+    expect(mockMarkdownRenderer).toHaveBeenCalledWith(
+      '# Original Title\n\nContent'
+    )
+  })
+})
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index 421ccfb56..90c194031 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -1,62 +1,50 @@
 <template>
-  <div v-if="shouldShow" class="whats-new-popup-container">
-    <!-- Arrow pointing to help center -->
-    <div class="help-center-arrow">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="19"
-        viewBox="0 0 16 19"
-        fill="none"
-      >
-        <!-- Arrow fill -->
-        <path
-          d="M15.25 1.27246L15.25 17.7275L0.999023 9.5L15.25 1.27246Z"
-          fill="#353535"
-        />
-        <!-- Top and bottom outlines only -->
-        <path
-          d="M15.25 1.27246L0.999023 9.5"
-          stroke="#4e4e4e"
-          stroke-width="1"
-          fill="none"
-        />
-        <path
-          d="M0.999023 9.5L15.25 17.7275"
-          stroke="#4e4e4e"
-          stroke-width="1"
-          fill="none"
-        />
-      </svg>
-    </div>
-
+  <div v-if="shouldShow" class="whats-new-popup-container left-4">
     <div class="whats-new-popup" @click.stop>
       <!-- Close Button -->
-      <button
-        class="close-button"
+      <Button
+        class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50"
         :aria-label="$t('g.close')"
+        icon="icon-[lucide--x]"
+        size="small"
+        severity="secondary"
+        text
         @click="closePopup"
+      />
+
+      <!-- Modal Body -->
+      <div class="modal-body flex flex-col gap-4 px-0 pt-0 pb-2 flex-1">
+        <!-- Release Content -->
+        <div
+          class="content-text max-h-96 overflow-y-auto"
+          v-html="formattedContent"
+        ></div>
+      </div>
+
+      <!-- Modal Footer -->
+      <div
+        class="modal-footer flex justify-between items-center gap-4 px-4 pb-4"
       >
-        <div class="close-icon"></div>
-      </button>
-
-      <!-- Release Content -->
-      <div class="popup-content">
-        <div class="content-text" v-html="formattedContent"></div>
-
-        <!-- Actions Section -->
-        <div class="popup-actions">
-          <a
-            class="learn-more-link"
-            :href="changelogUrl"
-            target="_blank"
-            rel="noopener,noreferrer"
+        <a
+          class="learn-more-link flex items-center gap-2 text-sm font-normal py-1"
+          :href="changelogUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          @click="closePopup"
+        >
+          <i class="icon-[lucide--external-link]"></i>
+          {{ $t('whatsNewPopup.learnMore') }}
+        </a>
+        <div class="footer-actions flex items-center gap-4">
+          <Button
+            class="h-8"
+            size="small"
+            severity="secondary"
+            text
             @click="closePopup"
           >
-            {{ $t('whatsNewPopup.learnMore') }}
-          </a>
-          <!-- TODO: CTA button -->
-          <!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
+            {{ $t('whatsNewPopup.later') }}
+          </Button>
         </div>
       </div>
     </div>
@@ -64,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import { default as DOMPurify } from 'dompurify'
+import Button from 'primevue/button'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -74,9 +64,9 @@ import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
 
-const { t } = useI18n()
 const { buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
+const { t } = useI18n()
 
 // Define emits
 const emit = defineEmits<{
@@ -87,9 +77,9 @@ const emit = defineEmits<{
 const isDismissed = ref(false)
 
 // Get latest release from store
-const latestRelease = computed<ReleaseNote | null>(
-  () => releaseStore.recentRelease
-)
+const latestRelease = computed<ReleaseNote | null>(() => {
+  return releaseStore.recentRelease
+})
 
 // Show popup when on latest version and not dismissed
 const shouldShow = computed(
@@ -108,15 +98,39 @@ const changelogUrl = computed(() => {
 
 const formattedContent = computed(() => {
   if (!latestRelease.value?.content) {
-    return `<p>${t('whatsNewPopup.noReleaseNotes')}</p>`
+    return DOMPurify.sanitize(`<p>${t('whatsNewPopup.noReleaseNotes')}</p>`)
   }
 
   try {
-    return renderMarkdownToHtml(latestRelease.value.content)
+    const markdown = latestRelease.value.content
+
+    // Check if content is meaningful (not just whitespace)
+    const trimmedContent = markdown.trim()
+    if (!trimmedContent || trimmedContent.replace(/\s+/g, '') === '') {
+      return DOMPurify.sanitize(`<p>${t('whatsNewPopup.noReleaseNotes')}</p>`)
+    }
+
+    // Extract image and remaining content separately
+    const imageMatch = markdown.match(/!\[.*?\]\(.*?\)/)
+    const image = imageMatch ? imageMatch[0] : ''
+
+    // Remove image from content but keep original title
+    const contentWithoutImage = markdown.replace(/!\[.*?\]\(.*?\)/, '').trim()
+
+    // Reorder: image first, then original content
+    const reorderedContent = [image, contentWithoutImage]
+      .filter(Boolean)
+      .join('\n\n')
+
+    // renderMarkdownToHtml already sanitizes with DOMPurify, so this is safe
+    return renderMarkdownToHtml(reorderedContent)
   } catch (error) {
     console.error('Error parsing markdown:', error)
-    // Fallback to plain text with line breaks
-    return latestRelease.value.content.replace(/\n/g, '<br>')
+    // Fallback to plain text with line breaks - sanitize the HTML we create
+    const fallbackContent = latestRelease.value.content.replace(/\n/g, '<br>')
+    return fallbackContent.trim()
+      ? DOMPurify.sanitize(fallbackContent)
+      : DOMPurify.sanitize(`<p>${t('whatsNewPopup.noReleaseNotes')}</p>`)
   }
 })
 
@@ -145,10 +159,11 @@ onMounted(async () => {
   }
 })
 
-// Expose methods for parent component
+// Expose methods for parent component and tests
 defineExpose({
   show,
-  hide
+  hide,
+  closePopup
 })
 </script>
 
@@ -163,165 +178,80 @@ defineExpose({
   pointer-events: auto;
 }
 
-/* Arrow pointing to help center */
-.help-center-arrow {
-  position: absolute;
-  bottom: calc(
-    var(--sidebar-width) * 2 + var(--sidebar-width) / 2
-  ); /* Position to center of help center icon (2 icons below + half icon height for center) */
-  transform: none;
-  z-index: 999;
-  pointer-events: none;
-}
-
-/* Position arrow based on sidebar location */
-.whats-new-popup-container.sidebar-left .help-center-arrow {
-  left: -14px; /* Overlap with popup outline */
-}
-
-.whats-new-popup-container.sidebar-left.small-sidebar .help-center-arrow {
-  left: -14px; /* Overlap with popup outline */
-  bottom: calc(
-    var(--sidebar-width) * 2 + var(--sidebar-icon-size) / 2 -
-      var(--whats-new-popup-bottom)
-  ); /* Position to center of help center icon (2 icons below + half icon height for center - what's new popup bottom position ) */
-}
-
-/* Sidebar positioning classes applied by parent */
-.whats-new-popup-container.sidebar-left {
-  left: 1rem;
-}
-
-.whats-new-popup-container.sidebar-left.small-sidebar {
-  left: 1rem;
-}
-
-.whats-new-popup-container.sidebar-right {
-  right: 1rem;
-}
-
 .whats-new-popup {
-  background: #353535;
-  border-radius: 12px;
+  background: var(--interface-menu-surface);
+  border-radius: 8px;
   max-width: 400px;
   width: 400px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 0.3);
+  border: 1px solid var(--interface-menu-stroke);
+  box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 0.2);
   position: relative;
-}
-
-/* Content Section */
-.popup-content {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  max-height: 80vh;
-  overflow-y: auto;
-  padding: 32px 32px 24px;
-  border-radius: 12px;
 }
 
-/* Close button */
-.close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 32px;
-  height: 32px;
-  padding: 6px;
-  background: #7c7c7c;
-  border-radius: 16px;
-  border: none;
-  cursor: pointer;
+/* Modal Body */
+.modal-body {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: translate(30%, -30%);
-  transition:
-    background-color 0.2s ease,
-    transform 0.1s ease;
-  z-index: 1;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0;
+  flex: 1;
 }
 
-.close-button:hover {
-  background: #8e8e8e;
-}
-
-.close-button:active {
-  background: #6a6a6a;
-  transform: translate(30%, -30%) scale(0.95);
-}
-
-.close-icon {
-  width: 16px;
-  height: 16px;
-  position: relative;
-  opacity: 0.9;
-  transition: opacity 0.2s ease;
-}
-
-.close-button:hover .close-icon {
-  opacity: 1;
-}
-
-.close-icon::before,
-.close-icon::after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 2px;
-  background: white;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  transition: background-color 0.2s ease;
-}
-
-.close-icon::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .content-text {
-  color: white;
+  color: var(--text-primary);
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
+  padding: 0 1rem;
 }
 
 /* Style the markdown content */
 /* Title */
 .content-text :deep(*) {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
 }
 
 .content-text :deep(h1) {
-  font-size: 16px;
-  font-weight: 700;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  margin-top: 1rem;
   margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-/* Version subtitle - targets the first p tag after h1 */
-.content-text :deep(h1 + p) {
-  color: #c0c0c0;
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 16px;
-  opacity: 0.8;
+/* What's new title - targets h2 or strong text after h1 */
+.content-text :deep(h2),
+.content-text :deep(h1 + p strong) {
+  color: var(--text-primary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px;
+  line-height: 1.429;
 }
 
 /* Regular paragraphs - short description */
 .content-text :deep(p) {
-  margin-bottom: 16px;
-  color: #e0e0e0;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  margin: 1rem 0;
 }
 
 /* List */
 .content-text :deep(ul),
 .content-text :deep(ol) {
-  margin-bottom: 16px;
+  margin-bottom: 0;
   padding-left: 0;
   list-style: none;
 }
@@ -336,110 +266,168 @@ defineExpose({
   margin-bottom: 0;
 }
 
-/* List items */
 .content-text :deep(li) {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   position: relative;
-  padding-left: 20px;
+  padding-left: 18px;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2102;
 }
 
 .content-text :deep(li:last-child) {
   margin-bottom: 0;
 }
 
-/* Custom bullet points */
 .content-text :deep(li::before) {
   content: '';
   position: absolute;
-  left: 0;
-  top: 10px;
-  display: flex;
-  width: 8px;
-  height: 8px;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1/1;
-  border-radius: 100px;
-  background: #60a5fa;
+  left: 4px;
+  top: 7px;
+  width: 6px;
+  height: 6px;
+  border: 2px solid var(--text-secondary);
+  border-radius: 50%;
+  background: transparent;
 }
 
-/* List item strong text */
 .content-text :deep(li strong) {
-  color: #fff;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
   font-size: 14px;
-  display: block;
-  margin-bottom: 4px;
+  font-weight: 400;
+  line-height: 1.2102;
+  margin-right: 4px;
 }
 
 .content-text :deep(li p) {
-  font-size: 12px;
-  margin-bottom: 0;
-  line-height: 2;
+  margin: 2px 0 0;
+  display: inline;
 }
 
 /* Code styling */
 .content-text :deep(code) {
-  background-color: #2a2a2a;
-  border: 1px solid #4a4a4a;
+  background-color: var(--input-surface);
+  border: 1px solid var(--interface-menu-stroke);
   border-radius: 4px;
   padding: 2px 6px;
-  color: #f8f8f2;
+  color: var(--text-primary);
   white-space: nowrap;
 }
 
-/* Remove top margin for first media element */
-.content-text :deep(img:first-child),
-.content-text :deep(video:first-child),
-.content-text :deep(iframe:first-child) {
-  margin-top: -32px; /* Align with the top edge of the popup content */
-  margin-bottom: 24px;
-}
-
-/* Media elements */
-.content-text :deep(img),
-.content-text :deep(video),
-.content-text :deep(iframe) {
-  width: calc(100% + 64px);
-  height: auto;
-  margin: 24px -32px;
+.content-text :deep(img) {
+  width: 100%;
+  height: 200px;
+  margin: 0 0 16px;
+  object-fit: cover;
   display: block;
+  border-radius: 8px;
 }
 
-/* Actions Section */
-.popup-actions {
+.content-text :deep(img:first-child) {
+  margin: -1rem -1rem 16px;
+  width: calc(100% + 2rem);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Add border to content when image is present */
+.content-text:has(img:first-child) {
+  border-left: 1px solid var(--interface-menu-stroke);
+  border-right: 1px solid var(--interface-menu-stroke);
+  border-top: 1px solid var(--interface-menu-stroke);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  margin: -1px;
+  margin-bottom: 0;
+}
+
+.content-text :deep(img + h1) {
+  margin-top: 0;
+}
+
+/* Secondary headings */
+.content-text :deep(h3) {
+  color: var(--text-primary);
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  line-height: 1.4;
+}
+
+/* Modal Footer */
+.modal-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
+  padding: 16px;
+  border-top: none;
+}
+
+.footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .learn-more-link {
-  color: #60a5fa;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
   font-size: 14px;
-  font-weight: 500;
-  line-height: 18.2px;
+  font-weight: 400;
+  line-height: 1.2102;
   text-decoration: none;
+  padding: 4px 0;
 }
 
 .learn-more-link:hover {
-  text-decoration: underline;
+  color: var(--text-primary);
 }
 
-.cta-button {
-  height: 40px;
-  padding: 0 20px;
-  background: white;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
+.learn-more-link i {
+  width: 16px;
+  height: 16px;
+}
+
+.action-secondary {
+  height: 32px;
+  padding: 4px 0;
+  background: transparent;
   border: none;
-  color: #121212;
+  color: var(--text-secondary);
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
+  line-height: 1.2102;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.action-secondary:hover {
+  color: var(--text-primary);
+}
+
+.action-primary {
+  height: 40px;
+  padding: 8px 16px;
+  background: var(--interface-menu-component-surface-hovered);
+  border-radius: 8px;
+  border: none;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2102;
   cursor: pointer;
 }
 
-.cta-button:hover {
-  background: #f0f0f0;
+.action-primary:hover {
+  background: var(--button-hover-surface);
 }
 </style>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index bb1273e81..debb358d6 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -38,7 +38,6 @@
           </IconButton>
         </div>
 
-        <div v-if="isSubgraphNode" class="icon-[comfy--workflow] size-4" />
         <div v-if="isApiNode" class="icon-[lucide--dollar-sign] size-4" />
 
         <!-- Node Title -->
@@ -76,13 +75,16 @@
           v-tooltip.top="enterSubgraphTooltipConfig"
           type="transparent"
           data-testid="subgraph-enter-button"
-          class="size-5"
+          class="ml-2 text-node-component-header h-5"
           @click.stop="handleEnterSubgraph"
           @dblclick.stop
         >
-          <i
-            class="icon-[lucide--picture-in-picture] size-5 text-node-component-header-icon"
-          ></i>
+          <div
+            class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
+          >
+            {{ $t('g.edit') }}
+            <i class="icon-[lucide--scaling] size-5"></i>
+          </div>
         </IconButton>
       </div>
     </div>
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
index d3461d4c3..0dfdae51b 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -26,6 +26,8 @@ export function useNodePointerInteractions(
     return true
   }
 
+  let hasDraggingStarted = false
+
   const startPosition = ref({ x: 0, y: 0 })
 
   const DRAG_THRESHOLD = 3 // pixels
@@ -57,7 +59,7 @@ export function useNodePointerInteractions(
 
     startPosition.value = { x: event.clientX, y: event.clientY }
 
-    startDrag(event, nodeId)
+    safeDragStart(event, nodeId)
   }
 
   function onPointermove(event: PointerEvent) {
@@ -78,7 +80,7 @@ export function useNodePointerInteractions(
     if (lmbDown && multiSelect && !layoutStore.isDraggingVueNodes.value) {
       layoutStore.isDraggingVueNodes.value = true
       handleNodeSelect(event, nodeId)
-      startDrag(event, nodeId)
+      safeDragStart(event, nodeId)
       return
     }
     // Check if we should start dragging (pointer moved beyond threshold)
@@ -102,6 +104,14 @@ export function useNodePointerInteractions(
     layoutStore.isDraggingVueNodes.value = false
   }
 
+  function safeDragStart(event: PointerEvent, nodeId: string) {
+    try {
+      startDrag(event, nodeId)
+    } finally {
+      hasDraggingStarted = true
+    }
+  }
+
   function safeDragEnd(event: PointerEvent) {
     try {
       const nodeId = toValue(nodeIdRef)
@@ -109,6 +119,7 @@ export function useNodePointerInteractions(
     } catch (error) {
       console.error('Error during endDrag:', error)
     } finally {
+      hasDraggingStarted = false
       cleanupDragState()
     }
   }
@@ -123,9 +134,12 @@ export function useNodePointerInteractions(
     }
     const wasDragging = layoutStore.isDraggingVueNodes.value
 
-    if (wasDragging) {
+    if (hasDraggingStarted || wasDragging) {
       safeDragEnd(event)
-      return
+
+      if (wasDragging) {
+        return
+      }
     }
 
     // Skip selection handling for right-click (button 2) - context menu handles its own selection
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
index 49024d61f..1b6eeaeeb 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -212,7 +212,7 @@ const renderPreview = (
     ctx.roundRect(x, y, sz, sz, [4])
     ctx.fill()
     ctx.fillStyle = textFill
-    ctx.font = '12px Arial'
+    ctx.font = '12px Inter, sans-serif'
     ctx.textAlign = 'center'
     ctx.fillText(text, x + 15, y + 20)
 
diff --git a/src/stores/systemStatsStore.ts b/src/stores/systemStatsStore.ts
index 06362930b..38b57b66d 100644
--- a/src/stores/systemStatsStore.ts
+++ b/src/stores/systemStatsStore.ts
@@ -1,6 +1,7 @@
 import { useAsyncState } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
+import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { isElectron } from '@/utils/envUtil'
@@ -30,6 +31,10 @@ export const useSystemStatsStore = defineStore('systemStats', () => {
   )
 
   function getFormFactor(): string {
+    if (isCloud) {
+      return 'cloud'
+    }
+
     if (!systemStats.value?.system?.os) {
       return 'other'
     }
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
index 9ee622e81..29ae4f986 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
@@ -2,16 +2,20 @@
   <div class="overflow-hidden">
     <Tabs :value="activeTab">
       <TabList class="scrollbar-hide overflow-x-auto">
-        <Tab v-if="hasCompatibilityIssues" value="warning" class="mr-6 p-2">
+        <Tab
+          v-if="hasCompatibilityIssues"
+          value="warning"
+          class="mr-6 p-2 font-inter"
+        >
           <div class="flex items-center gap-1">
             <span>⚠️</span>
             {{ importFailed ? $t('g.error') : $t('g.warning') }}
           </div>
         </Tab>
-        <Tab value="description" class="mr-6 p-2">
+        <Tab value="description" class="mr-6 p-2 font-inter">
           {{ $t('g.description') }}
         </Tab>
-        <Tab value="nodes" class="p-2">
+        <Tab value="nodes" class="p-2 font-inter">
           {{ $t('g.nodes') }}
         </Tab>
       </TabList>
diff --git a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
deleted file mode 100644
index 5a406908b..000000000
--- a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
+++ /dev/null
@@ -1,440 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
-import type { components } from '@/types/comfyRegistryTypes'
-
-type ReleaseNote = components['schemas']['ReleaseNote']
-
-// Mock dependencies
-vi.mock('vue-i18n', () => ({
-  useI18n: vi.fn(() => ({
-    locale: { value: 'en' },
-    t: vi.fn((key) => key)
-  })),
-  createI18n: vi.fn(() => ({
-    global: {
-      locale: { value: 'en' }
-    }
-  }))
-}))
-
-vi.mock('@/utils/markdownRendererUtil', () => ({
-  renderMarkdownToHtml: vi.fn((content) => `<p>${content}</p>`)
-}))
-
-vi.mock('@/platform/updates/common/releaseStore', () => ({
-  useReleaseStore: vi.fn()
-}))
-
-describe('WhatsNewPopup', () => {
-  const mockReleaseStore = {
-    recentRelease: null as ReleaseNote | null,
-    shouldShowPopup: false,
-    handleWhatsNewSeen: vi.fn(),
-    releases: [] as ReleaseNote[],
-    fetchReleases: vi.fn()
-  }
-
-  const createWrapper = (props = {}) => {
-    return mount(WhatsNewPopup, {
-      props,
-      global: {
-        mocks: {
-          $t: vi.fn((key: string) => {
-            const translations: Record<string, string> = {
-              'g.close': 'Close',
-              'whatsNewPopup.noReleaseNotes': 'No release notes available'
-            }
-            return translations[key] || key
-          })
-        }
-      }
-    })
-  }
-
-  beforeEach(async () => {
-    vi.clearAllMocks()
-
-    // Reset mock store
-    mockReleaseStore.recentRelease = null
-    mockReleaseStore.shouldShowPopup = false
-    mockReleaseStore.releases = []
-
-    // Mock release store
-    const { useReleaseStore } = await import(
-      '@/platform/updates/common/releaseStore'
-    )
-    vi.mocked(useReleaseStore).mockReturnValue(mockReleaseStore as any)
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  describe('visibility', () => {
-    it('should not show when shouldShowPopup is false', () => {
-      mockReleaseStore.shouldShowPopup = false
-
-      const wrapper = createWrapper()
-
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(false)
-    })
-
-    it('should show when shouldShowPopup is true and not dismissed', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'New features added',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(true)
-      expect(wrapper.find('.whats-new-popup').exists()).toBe(true)
-    })
-
-    it('should hide when dismissed locally', async () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'New features added',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      // Initially visible
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(true)
-
-      // Click close button
-      await wrapper.find('.close-button').trigger('click')
-
-      // Should be hidden
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(false)
-    })
-  })
-
-  describe('content rendering', () => {
-    it('should render release content using renderMarkdownToHtml', async () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: '# Release Notes\n\nNew features',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      // Check that the content is rendered (renderMarkdownToHtml is mocked to return processed content)
-      expect(wrapper.find('.content-text').exists()).toBe(true)
-      const contentHtml = wrapper.find('.content-text').html()
-      expect(contentHtml).toContain('<p># Release Notes')
-    })
-
-    it('should handle missing release content', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: '',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      expect(wrapper.find('.content-text').html()).toContain(
-        'whatsNewPopup.noReleaseNotes'
-      )
-    })
-
-    it('should handle markdown parsing errors gracefully', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Content with\nnewlines',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      // Should show content even without markdown processing
-      expect(wrapper.find('.content-text').exists()).toBe(true)
-    })
-  })
-
-  describe('changelog URL generation', () => {
-    it('should generate English changelog URL with version anchor', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0-beta.1',
-        attention: 'medium',
-        content: 'Release content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-      const learnMoreLink = wrapper.find('.learn-more-link')
-
-      // formatVersionAnchor replaces dots with dashes: 1.24.0-beta.1 -> v1-24-0-beta-1
-      expect(learnMoreLink.attributes('href')).toBe(
-        'https://docs.comfy.org/changelog#v1-24-0-beta-1'
-      )
-    })
-
-    it('should generate Chinese changelog URL when locale is zh', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Release content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper({
-        global: {
-          mocks: {
-            $t: vi.fn((key: string) => {
-              const translations: Record<string, string> = {
-                'g.close': 'Close',
-                'whatsNewPopup.noReleaseNotes': 'No release notes available',
-                'whatsNewPopup.learnMore': 'Learn More'
-              }
-              return translations[key] || key
-            })
-          },
-          provide: {
-            // Mock vue-i18n locale as Chinese
-            locale: { value: 'zh' }
-          }
-        }
-      })
-
-      // Since the locale mocking doesn't work well in tests, just check the English URL for now
-      // In a real component test with proper i18n setup, this would show the Chinese URL
-      const learnMoreLink = wrapper.find('.learn-more-link')
-      expect(learnMoreLink.attributes('href')).toBe(
-        'https://docs.comfy.org/changelog#v1-24-0'
-      )
-    })
-
-    it('should generate base changelog URL when no version available', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '',
-        attention: 'medium',
-        content: 'Release content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-      const learnMoreLink = wrapper.find('.learn-more-link')
-
-      expect(learnMoreLink.attributes('href')).toBe(
-        'https://docs.comfy.org/changelog'
-      )
-    })
-  })
-
-  describe('popup dismissal', () => {
-    it('should call handleWhatsNewSeen and emit event when closed', async () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Release content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-      mockReleaseStore.handleWhatsNewSeen.mockResolvedValue(undefined)
-
-      const wrapper = createWrapper()
-
-      // Click close button
-      await wrapper.find('.close-button').trigger('click')
-
-      expect(mockReleaseStore.handleWhatsNewSeen).toHaveBeenCalledWith('1.24.0')
-      expect(wrapper.emitted('whats-new-dismissed')).toBeTruthy()
-      expect(wrapper.emitted('whats-new-dismissed')).toHaveLength(1)
-    })
-
-    it('should close when learn more link is clicked', async () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Release content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-      mockReleaseStore.handleWhatsNewSeen.mockResolvedValue(undefined)
-
-      const wrapper = createWrapper()
-
-      // Click learn more link
-      await wrapper.find('.learn-more-link').trigger('click')
-
-      expect(mockReleaseStore.handleWhatsNewSeen).toHaveBeenCalledWith('1.24.0')
-      expect(wrapper.emitted('whats-new-dismissed')).toBeTruthy()
-    })
-
-    it('should handle cases where no release is available during close', async () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = null
-
-      const wrapper = createWrapper()
-
-      // Try to close
-      await wrapper.find('.close-button').trigger('click')
-
-      expect(mockReleaseStore.handleWhatsNewSeen).not.toHaveBeenCalled()
-      expect(wrapper.emitted('whats-new-dismissed')).toBeTruthy()
-    })
-  })
-
-  describe('exposed methods', () => {
-    it('should expose show and hide methods', () => {
-      const wrapper = createWrapper()
-
-      expect(wrapper.vm.show).toBeDefined()
-      expect(wrapper.vm.hide).toBeDefined()
-      expect(typeof wrapper.vm.show).toBe('function')
-      expect(typeof wrapper.vm.hide).toBe('function')
-    })
-
-    it('should show popup when show method is called', async () => {
-      mockReleaseStore.shouldShowPopup = true
-
-      const wrapper = createWrapper()
-
-      // Initially hide it
-      wrapper.vm.hide()
-      await nextTick()
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(false)
-
-      // Show it
-      wrapper.vm.show()
-      await nextTick()
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(true)
-    })
-
-    it('should hide popup when hide method is called', async () => {
-      mockReleaseStore.shouldShowPopup = true
-
-      const wrapper = createWrapper()
-
-      // Initially visible
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(true)
-
-      // Hide it
-      wrapper.vm.hide()
-      await nextTick()
-      expect(wrapper.find('.whats-new-popup-container').exists()).toBe(false)
-    })
-  })
-
-  describe('initialization', () => {
-    it('should fetch releases on mount if not already loaded', async () => {
-      mockReleaseStore.releases = []
-      mockReleaseStore.fetchReleases.mockResolvedValue(undefined)
-
-      createWrapper()
-
-      // Wait for onMounted
-      await nextTick()
-
-      expect(mockReleaseStore.fetchReleases).toHaveBeenCalled()
-    })
-
-    it('should not fetch releases if already loaded', async () => {
-      mockReleaseStore.releases = [
-        {
-          id: 1,
-          project: 'comfyui_frontend',
-          version: '1.24.0',
-          attention: 'medium' as const,
-          content: 'Content',
-          published_at: '2023-01-01T00:00:00Z'
-        }
-      ]
-      mockReleaseStore.fetchReleases.mockResolvedValue(undefined)
-
-      createWrapper()
-
-      // Wait for onMounted
-      await nextTick()
-
-      expect(mockReleaseStore.fetchReleases).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('accessibility', () => {
-    it('should have proper aria-label for close button', () => {
-      const mockT = vi.fn((key) => (key === 'g.close' ? 'Close' : key))
-      vi.doMock('vue-i18n', () => ({
-        useI18n: vi.fn(() => ({
-          locale: { value: 'en' },
-          t: mockT
-        }))
-      }))
-
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-
-      expect(wrapper.find('.close-button').attributes('aria-label')).toBe(
-        'Close'
-      )
-    })
-
-    it('should have proper link attributes for external changelog', () => {
-      mockReleaseStore.shouldShowPopup = true
-      mockReleaseStore.recentRelease = {
-        id: 1,
-        project: 'comfyui_frontend',
-        version: '1.24.0',
-        attention: 'medium',
-        content: 'Content',
-        published_at: '2023-01-01T00:00:00Z'
-      }
-
-      const wrapper = createWrapper()
-      const learnMoreLink = wrapper.find('.learn-more-link')
-
-      expect(learnMoreLink.attributes('target')).toBe('_blank')
-      expect(learnMoreLink.attributes('rel')).toBe('noopener,noreferrer')
-    })
-  })
-})
diff --git a/tests-ui/tests/composables/useExternalLink.test.ts b/tests-ui/tests/composables/useExternalLink.test.ts
index 986322cba..7f0ef90aa 100644
--- a/tests-ui/tests/composables/useExternalLink.test.ts
+++ b/tests-ui/tests/composables/useExternalLink.test.ts
@@ -1,7 +1,4 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import { useExternalLink } from '@/composables/useExternalLink'
 
 // Mock the environment utilities
 vi.mock('@/utils/envUtil', () => ({
@@ -9,22 +6,27 @@ vi.mock('@/utils/envUtil', () => ({
   electronAPI: vi.fn()
 }))
 
-// Mock vue-i18n
-const mockLocale = ref('en')
-vi.mock('vue-i18n', () => ({
-  useI18n: vi.fn(() => ({
-    locale: mockLocale
-  }))
+// Provide a minimal i18n instance for the composable
+const i18n = vi.hoisted(() => ({
+  global: {
+    locale: {
+      value: 'en'
+    }
+  }
+}))
+vi.mock('@/i18n', () => ({
+  i18n
 }))
 
 // Import after mocking to get the mocked versions
+import { useExternalLink } from '@/composables/useExternalLink'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
 describe('useExternalLink', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     // Reset to default state
-    mockLocale.value = 'en'
+    i18n.global.locale.value = 'en'
     vi.mocked(isElectron).mockReturnValue(false)
   })
 
@@ -53,7 +55,7 @@ describe('useExternalLink', () => {
 
   describe('buildDocsUrl', () => {
     it('should build basic docs URL without locale', () => {
-      mockLocale.value = 'en'
+      i18n.global.locale.value = 'en'
       const { buildDocsUrl } = useExternalLink()
 
       const url = buildDocsUrl('/changelog')
@@ -61,7 +63,7 @@ describe('useExternalLink', () => {
     })
 
     it('should build docs URL with Chinese (zh) locale when requested', () => {
-      mockLocale.value = 'zh'
+      i18n.global.locale.value = 'zh'
       const { buildDocsUrl } = useExternalLink()
 
       const url = buildDocsUrl('/changelog', { includeLocale: true })
@@ -69,7 +71,7 @@ describe('useExternalLink', () => {
     })
 
     it('should build docs URL with Chinese (zh-TW) locale when requested', () => {
-      mockLocale.value = 'zh-TW'
+      i18n.global.locale.value = 'zh-TW'
       const { buildDocsUrl } = useExternalLink()
 
       const url = buildDocsUrl('/changelog', { includeLocale: true })
@@ -77,7 +79,7 @@ describe('useExternalLink', () => {
     })
 
     it('should not include locale for English when requested', () => {
-      mockLocale.value = 'en'
+      i18n.global.locale.value = 'en'
       const { buildDocsUrl } = useExternalLink()
 
       const url = buildDocsUrl('/changelog', { includeLocale: true })
@@ -92,7 +94,7 @@ describe('useExternalLink', () => {
     })
 
     it('should add platform suffix when requested', () => {
-      mockLocale.value = 'en'
+      i18n.global.locale.value = 'en'
       vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
@@ -104,7 +106,7 @@ describe('useExternalLink', () => {
     })
 
     it('should add platform suffix with trailing slash', () => {
-      mockLocale.value = 'en'
+      i18n.global.locale.value = 'en'
       vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'win32'
@@ -116,7 +118,7 @@ describe('useExternalLink', () => {
     })
 
     it('should combine locale and platform', () => {
-      mockLocale.value = 'zh'
+      i18n.global.locale.value = 'zh'
       vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
@@ -133,7 +135,7 @@ describe('useExternalLink', () => {
     })
 
     it('should not add platform when not desktop', () => {
-      mockLocale.value = 'en'
+      i18n.global.locale.value = 'en'
       vi.mocked(isElectron).mockReturnValue(false)
 
       const { buildDocsUrl } = useExternalLink()
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
index 1c61d1272..1cd27ced1 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
@@ -20,7 +20,7 @@ LiteGraphGlobal {
   },
   "ContextMenu": [Function],
   "CurveEditor": [Function],
-  "DEFAULT_FONT": "Arial",
+  "DEFAULT_FONT": "Inter",
   "DEFAULT_GROUP_FONT": 24,
   "DEFAULT_GROUP_FONT_SIZE": undefined,
   "DEFAULT_POSITION": [
@@ -33,7 +33,7 @@ LiteGraphGlobal {
   "EVENT": -1,
   "EVENT_LINK_COLOR": "#A86",
   "GRID_SHAPE": 6,
-  "GROUP_FONT": "Arial",
+  "GROUP_FONT": "Inter",
   "Globals": {},
   "HIDDEN_LINK": -1,
   "INPUT": 1,
@@ -65,7 +65,7 @@ LiteGraphGlobal {
   "NODE_DEFAULT_COLOR": "#333",
   "NODE_DEFAULT_SHAPE": 2,
   "NODE_ERROR_COLOUR": "#E00",
-  "NODE_FONT": "Arial",
+  "NODE_FONT": "Inter",
   "NODE_MIN_WIDTH": 50,
   "NODE_MODES": [
     "Always",
diff --git a/tests-ui/tests/store/releaseStore.test.ts b/tests-ui/tests/store/releaseStore.test.ts
index 4020eac63..dbd0f8998 100644
--- a/tests-ui/tests/store/releaseStore.test.ts
+++ b/tests-ui/tests/store/releaseStore.test.ts
@@ -1,5 +1,5 @@
 import { createPinia, setActivePinia } from 'pinia'
-import { compare as semverCompare } from 'semver'
+import { compare, valid } from 'semver'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
@@ -7,6 +7,7 @@ import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 // Mock the dependencies
 vi.mock('semver')
 vi.mock('@/utils/envUtil')
+vi.mock('@/platform/distribution/types', () => ({ isCloud: false }))
 vi.mock('@/platform/updates/common/releaseService')
 vi.mock('@/platform/settings/settingStore')
 vi.mock('@/stores/systemStatsStore')
@@ -72,6 +73,7 @@ describe('useReleaseStore', () => {
     vi.mocked(useSettingStore).mockReturnValue(mockSettingStore)
     vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore)
     vi.mocked(isElectron).mockReturnValue(true)
+    vi.mocked(valid).mockReturnValue('1.0.0')
 
     // Default showVersionUpdates to true
     mockSettingStore.get.mockImplementation((key: string) => {
@@ -116,14 +118,14 @@ describe('useReleaseStore', () => {
     })
 
     it('should show update button (shouldShowUpdateButton)', () => {
-      vi.mocked(semverCompare).mockReturnValue(1) // newer version available
+      vi.mocked(compare).mockReturnValue(1) // newer version available
 
       store.releases = [mockRelease]
       expect(store.shouldShowUpdateButton).toBe(true)
     })
 
     it('should not show update button when no new version', () => {
-      vi.mocked(semverCompare).mockReturnValue(-1) // current version is newer
+      vi.mocked(compare).mockReturnValue(-1) // current version is newer
 
       store.releases = [mockRelease]
       expect(store.shouldShowUpdateButton).toBe(false)
@@ -144,14 +146,14 @@ describe('useReleaseStore', () => {
       })
 
       it('should show toast for medium/high attention releases', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
         store.releases = [mockRelease]
 
         expect(store.shouldShowToast).toBe(true)
       })
 
       it('should not show toast for low attention releases', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         const lowAttentionRelease = {
           ...mockRelease,
@@ -164,7 +166,7 @@ describe('useReleaseStore', () => {
       })
 
       it('should show red dot for new versions', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
@@ -172,7 +174,7 @@ describe('useReleaseStore', () => {
       it('should show popup for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
 
-        vi.mocked(semverCompare).mockReturnValue(0)
+        vi.mocked(compare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(true)
       })
@@ -200,13 +202,13 @@ describe('useReleaseStore', () => {
       })
 
       it('should not show toast even with new version available', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowToast).toBe(false)
       })
 
       it('should not show red dot even with new version available', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
@@ -214,7 +216,7 @@ describe('useReleaseStore', () => {
       it('should not show popup even for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
 
-        vi.mocked(semverCompare).mockReturnValue(0)
+        vi.mocked(compare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(false)
       })
@@ -494,7 +496,7 @@ describe('useReleaseStore', () => {
         return null
       })
 
-      vi.mocked(semverCompare).mockReturnValue(1)
+      vi.mocked(compare).mockReturnValue(1)
 
       store.releases = [mockRelease]
 
@@ -502,7 +504,7 @@ describe('useReleaseStore', () => {
     })
 
     it('should show red dot for new versions', () => {
-      vi.mocked(semverCompare).mockReturnValue(1)
+      vi.mocked(compare).mockReturnValue(1)
       mockSettingStore.get.mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
         return null
@@ -520,7 +522,7 @@ describe('useReleaseStore', () => {
         return null
       })
 
-      vi.mocked(semverCompare).mockReturnValue(0) // versions are equal (latest version)
+      vi.mocked(compare).mockReturnValue(0) // versions are equal (latest version)
 
       store.releases = [mockRelease]
 
@@ -578,14 +580,14 @@ describe('useReleaseStore', () => {
       })
 
       it('should show toast when conditions are met', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
         store.releases = [mockRelease]
 
         expect(store.shouldShowToast).toBe(true)
       })
 
       it('should show red dot when new version available', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
@@ -593,7 +595,7 @@ describe('useReleaseStore', () => {
       it('should show popup for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
 
-        vi.mocked(semverCompare).mockReturnValue(0)
+        vi.mocked(compare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(true)
       })
@@ -606,7 +608,7 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show toast even when all other conditions are met', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         // Set up all conditions that would normally show toast
         store.releases = [mockRelease]
@@ -615,13 +617,13 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show red dot even when new version available', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
       it('should NOT show toast regardless of attention level', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         // Test with high attention releases
         const highRelease = {
@@ -640,7 +642,7 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show red dot even with high attention release', () => {
-        vi.mocked(semverCompare).mockReturnValue(1)
+        vi.mocked(compare).mockReturnValue(1)
 
         store.releases = [{ ...mockRelease, attention: 'high' as const }]
 
@@ -650,7 +652,7 @@ describe('useReleaseStore', () => {
       it('should NOT show popup even for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
 
-        vi.mocked(semverCompare).mockReturnValue(0)
+        vi.mocked(compare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(false)
       })
diff --git a/tests-ui/tests/store/systemStatsStore.test.ts b/tests-ui/tests/store/systemStatsStore.test.ts
index 67d76ee5a..49653c780 100644
--- a/tests-ui/tests/store/systemStatsStore.test.ts
+++ b/tests-ui/tests/store/systemStatsStore.test.ts
@@ -17,6 +17,8 @@ vi.mock('@/utils/envUtil', () => ({
   isElectron: vi.fn()
 }))
 
+vi.mock('@/platform/distribution/types', () => ({ isCloud: false }))
+
 describe('useSystemStatsStore', () => {
   let store: ReturnType<typeof useSystemStatsStore>