diff --git a/browser_tests/tests/releaseNotifications.spec.ts b/browser_tests/tests/releaseNotifications.spec.ts
index 19d09327d0..a674824768 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
@@ -263,7 +263,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
@@ -311,7 +311,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
@@ -362,7 +362,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/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 503e065e48..e0b13566cc 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -89,6 +89,13 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
+  /* Light theme specific tokens */
+  --color-interface-menu-keybind-surface-blue: #78BAE9;
+  
+  /* Corner radius tokens */
+  --corner-radius-corner-radius-md: 8px;
+  --base-corner-radius-corner-radius-md: 8px;
+
   --color-coral-red-600: #973a40;
   --color-coral-red-500: #c53f49;
   --color-coral-red-400: #dd424e;
@@ -181,9 +188,18 @@
   --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);
 
+  /* Light theme specific tokens */
+  --color-interface-menu-keybind-surface-blue: #78BAE9;
+  
+  /* Corner radius tokens */
+  --corner-radius-corner-radius-md: 8px;
+  --base-corner-radius-corner-radius-md: 8px;
+
   --nav-background: var(--color-white);
 
   --node-border: var(--color-smoke-300);
@@ -293,6 +309,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);
 
@@ -383,6 +401,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(
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index e028a3eb1e..c266c7ce9b 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -1,38 +1,54 @@
 <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="Help Center Menu"
   >
     <!-- 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-text-primary"
+            style="width: 16px; height: 16px; margin-left: auto"
+          />
+          <i
+            v-if="menuItem.key === 'more'"
+            class="pi pi-chevron-right"
+            style="margin-left: 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 +84,30 @@
     </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')"
-      >
+      <div v-if="hasReleases" role="group" aria-label="Recent releases">
         <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 +126,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,15 +150,13 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -165,6 +176,7 @@ interface MenuItem {
   type?: 'item' | 'divider'
   items?: MenuItem[]
   showRedDot?: boolean
+  showExternalIcon?: boolean
 }
 
 // Constants
@@ -197,7 +209,6 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
-const telemetry = useTelemetry()
 
 // Emits
 const emit = defineEmits<{
@@ -209,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)
@@ -229,7 +239,6 @@ const moreItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.desktopUserGuide'),
       visible: isElectron(),
       action: () => {
-        trackResourceClick('docs', true)
         const docsUrl =
           electronAPI().getPlatform() === 'darwin'
             ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
@@ -279,13 +288,33 @@ const moreMenuItem = computed(() =>
 
 const menuItems = computed<MenuItem[]>(() => {
   const items: MenuItem[] = [
+    {
+      key: 'feedback',
+      type: 'item',
+      icon: 'icon-[lucide--clipboard-pen]',
+      label: t('helpCenter.feedback'),
+      action: () => {
+        // TODO: Implement feedback dialog action
+        emit('close')
+      }
+    },
+    {
+      key: 'help',
+      type: 'item',
+      icon: 'icon-[lucide--message-circle-question]',
+      label: t('helpCenter.help'),
+      action: () => {
+        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)
         openExternalLink(EXTERNAL_LINKS.DOCS)
         emit('close')
       }
@@ -295,8 +324,8 @@ const menuItems = computed<MenuItem[]>(() => {
       type: 'item',
       icon: 'pi pi-discord',
       label: 'Discord',
+      showExternalIcon: true,
       action: () => {
-        trackResourceClick('discord', true)
         openExternalLink(EXTERNAL_LINKS.DISCORD)
         emit('close')
       }
@@ -304,24 +333,13 @@ 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(EXTERNAL_LINKS.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')
-      }
     }
   ]
 
@@ -334,7 +352,6 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
       action: async () => {
-        trackResourceClick('manager', false)
         await useManagerState().openManager({
           initialTab: ManagerTab.All,
           showToastOnLegacyError: false
@@ -358,23 +375,6 @@ const menuItems = computed<MenuItem[]>(() => {
 })
 
 // Utility Functions
-const trackResourceClick = (
-  resourceType:
-    | 'docs'
-    | 'discord'
-    | 'github'
-    | 'help_feedback'
-    | 'manager'
-    | 'release_notes',
-  isExternal: boolean
-): void => {
-  telemetry?.trackHelpResourceClicked({
-    resource_type: resourceType,
-    is_external: isExternal,
-    source: 'help_center'
-  })
-}
-
 const openExternalLink = (url: string): void => {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
@@ -461,16 +461,6 @@ const formatReleaseDate = (dateString?: string): string => {
   return 'now'
 }
 
-const shouldShowUpdateButton = (release: ReleaseNote): boolean => {
-  // Hide update buttons in cloud distribution
-  if (isCloud) return false
-
-  return (
-    releaseStore.shouldShowUpdateButton &&
-    release === releaseStore.recentReleases[0]
-  )
-}
-
 // Event Handlers
 const onMenuItemHover = async (
   key: string,
@@ -530,7 +520,6 @@ const onReinstall = (): void => {
 }
 
 const onReleaseClick = (release: ReleaseNote): void => {
-  trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
   const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
@@ -538,12 +527,6 @@ const onReleaseClick = (release: ReleaseNote): void => {
   emit('close')
 }
 
-const onUpdate = (_: ReleaseNote): void => {
-  trackResourceClick('docs', true)
-  openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
-  emit('close')
-}
-
 // Generate language-aware changelog URL
 const getChangelogUrl = (): string => {
   const isChineseLocale = locale.value === 'zh'
@@ -554,52 +537,45 @@ const getChangelogUrl = (): string => {
 
 // Lifecycle
 onMounted(async () => {
-  telemetry?.trackHelpCenterOpened({ source: 'sidebar' })
   if (!hasReleases.value) {
     await releaseStore.fetchReleases()
   }
 })
-
-onBeforeUnmount(() => {
-  const timeSpentSeconds = Math.round((Date.now() - openedAt.value) / 1000)
-  telemetry?.trackHelpCenterClosed({ time_spent_seconds: timeSpentSeconds })
-})
 </script>
 
 <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,
@@ -610,16 +586,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;
@@ -627,7 +603,9 @@ onBeforeUnmount(() => {
 }
 
 .help-menu-icon svg {
-  color: var(--p-text-muted-color);
+  width: 16px;
+  height: 16px;
+  color: var(--text-primary);
 }
 
 .menu-red-dot {
@@ -650,16 +628,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(--color-stone-100);
+  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;
 }
@@ -672,7 +648,7 @@ onBeforeUnmount(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 4px;
   min-width: 0;
 }
 
@@ -680,12 +656,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 {
@@ -702,35 +688,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,
@@ -741,8 +723,8 @@ onBeforeUnmount(() => {
 
 .submenu-divider {
   height: 1px;
-  background: #3e3e3e;
-  margin: 0.5rem 0;
+  background: var(--interface-menu-stroke);
+  margin: 4px 0;
 }
 
 /* Scrollbar Styling */
@@ -755,12 +737,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/locales/en/main.json b/src/locales/en/main.json
index a471b5f098..ee5083c222 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -679,9 +679,10 @@
     }
   },
   "helpCenter": {
+    "feedback": "Give Feedback",
     "docs": "Docs",
     "github": "Github",
-    "helpFeedback": "Help & Feedback",
+    "help": "Help & Support",
     "managerExtension": "Manager Extension",
     "more": "More...",
     "whatsNew": "What's New?",
@@ -695,10 +696,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",
@@ -2078,6 +2080,8 @@
   },
   "whatsNewPopup": {
     "learnMore": "Learn more",
+    "later": "Later",
+    "update": "Update",
     "noReleaseNotes": "No release notes available."
   },
   "breadcrumbsMenu": {
diff --git a/src/platform/updates/components/ReleaseNotificationToast.test.ts b/src/platform/updates/components/ReleaseNotificationToast.test.ts
new file mode 100644
index 0000000000..053346b57d
--- /dev/null
+++ b/src/platform/updates/components/ReleaseNotificationToast.test.ts
@@ -0,0 +1,269 @@
+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
+    })
+  }))
+}))
+
+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
+
+  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-notification-toast').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 skipButton = wrapper.find('.action-secondary')
+    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 as any).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 as any).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('.learn-more-link')
+    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'
+    )
+    const mockMarkdownRenderer = vi.mocked(mockMarkdownRendererModule)
+      .renderMarkdownToHtml as any
+    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.recentRelease = {
+      version: '1.2.3',
+      content: ''
+    } as ReleaseNote
+
+    wrapper = mountComponent()
+
+    // Should render fallback content
+    const descriptionElement = wrapper.find('.toast-description')
+    expect(descriptionElement.exists()).toBe(true)
+  })
+
+  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-notification-toast').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 as any).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 94f21a5546..cab093c6ae 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -4,7 +4,7 @@
       <!-- Header section with icon and text -->
       <div class="toast-header">
         <div class="toast-icon">
-          <i class="pi pi-download" />
+          <i class="icon-[lucide--rocket]" />
         </div>
         <div class="toast-text">
           <div class="toast-title">
@@ -16,28 +16,34 @@
         </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>
+      <!-- Description section -->
+      <div class="toast-description" v-html="formattedContent"></div>
+
+      <!-- Footer section -->
+      <div class="toast-footer">
+        <a
+          class="learn-more-link flex items-center gap-2 text-sm font-normal py-1"
+          :href="changelogUrl"
+          target="_blank"
+          rel="noopener,noreferrer"
+          @click="handleLearnMore"
+        >
+          <i class="icon-[lucide--external-link]"></i>
+          {{ $t('releaseToast.whatsNew') }}
+        </a>
+        <div class="footer-actions flex items-center gap-4">
+          <button
+            class="action-secondary h-6 px-0 bg-transparent border-none text-sm font-normal cursor-pointer"
+            @click="handleSkip"
+          >
+            {{ $t('releaseToast.skip') }}
+          </button>
+          <button
+            class="action-primary h-10 px-4 border-none text-sm font-normal rounded-lg cursor-pointer"
+            @click="handleUpdate"
+          >
+            {{ $t('releaseToast.update') }}
+          </button>
         </div>
       </div>
     </div>
@@ -49,6 +55,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
@@ -60,9 +67,9 @@ const releaseStore = useReleaseStore()
 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(
@@ -83,6 +90,23 @@ const changelogUrl = computed(() => {
   return baseUrl
 })
 
+const formattedContent = computed(() => {
+  if (!latestRelease.value?.content) {
+    return `<p>Check out the latest improvements and features in this update.</p>`
+  }
+
+  try {
+    const markdown = latestRelease.value.content
+    // Remove the h1 title line for toast mode
+    const contentWithoutTitle = markdown.replace(/^# .+$/m, '')
+    return renderMarkdownToHtml(contentWithoutTitle)
+  } catch (error) {
+    console.error('Error parsing markdown:', error)
+    // Fallback to plain text with line breaks
+    return latestRelease.value.content.replace(/\n/g, '<br>')
+  }
+})
+
 // Auto-hide timer
 let hideTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -143,6 +167,13 @@ onMounted(async () => {
     await releaseStore.fetchReleases()
   }
 })
+
+// Expose methods for testing
+defineExpose({
+  handleSkip,
+  handleLearnMore,
+  handleUpdate
+})
 </script>
 
 <style scoped>
@@ -169,39 +200,37 @@ onMounted(async () => {
 
 /* 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;
+  width: 384px;
+  background: var(--interface-menu-surface);
+  box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 0.2);
+  border-radius: var(--corner-radius-corner-radius-md, 8px);
+  border: 1px solid var(--interface-menu-stroke);
   display: flex;
   flex-direction: column;
-  gap: 8px;
 }
 
 /* Header section */
 .toast-header {
   display: flex;
   gap: 16px;
-  align-items: flex-start;
+  align-items: center;
+  padding: 16px 16px 0;
 }
 
 /* Icon container */
 .toast-icon {
-  width: 42px;
-  height: 42px;
-  padding: 10px;
-  background: rgb(0 122 255 / 0.2);
-  border-radius: 8px;
+  width: 40px;
+  height: 40px;
+  padding: 12px;
+  background: var(--color-interface-menu-keybind-surface-blue);
+  border-radius: var(--corner-radius-corner-radius-md, 8px);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .toast-icon i {
-  color: #007aff;
+  color: white;
   font-size: 16px;
 }
 
@@ -210,100 +239,173 @@ onMounted(async () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   gap: 4px;
 }
 
 .toast-title {
-  color: white;
+  color: var(--text-primary);
   font-size: 14px;
-  font-family: 'Satoshi', sans-serif;
-  font-weight: 500;
-  line-height: 18.2px;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  line-height: 1.429;
 }
 
 .toast-version-badge {
-  color: #a0a1a2;
-  font-size: 12px;
-  font-family: 'Satoshi', sans-serif;
-  font-weight: 500;
-  line-height: 15.6px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  line-height: 1.21;
 }
 
-/* Actions section */
-.toast-actions-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+/* Description section */
+.toast-description {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 16px;
+  padding-left: 72px;
+  word-wrap: break-word;
 }
 
-.actions-row {
-  padding-left: 58px; /* Align with text content */
-  padding-right: 0;
+/* Style the markdown content */
+.toast-description :deep(*) {
+  box-sizing: border-box;
+}
+
+.toast-description :deep(h1) {
+  color: var(--text-primary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  margin: 0 0 8px;
+}
+
+.toast-description :deep(p) {
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  margin: 8px 0;
+}
+
+.toast-description :deep(ul),
+.toast-description :deep(ol) {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.toast-description :deep(li) {
+  margin-bottom: 6px;
+  position: relative;
+  padding-left: 18px;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.21;
+}
+
+.toast-description :deep(li::before) {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 7px;
+  width: 6px;
+  height: 6px;
+  border: 2px solid var(--text-secondary);
+  border-radius: 50%;
+  background: transparent;
+}
+
+.toast-description :deep(li strong) {
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.21;
+  margin-right: 4px;
+}
+
+.toast-description :deep(code) {
+  background-color: var(--input-surface);
+  border: 1px solid var(--interface-menu-stroke);
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+/* Footer section */
+.toast-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 16px;
+  padding: 0 16px 16px;
 }
 
-.left-actions {
+.footer-actions {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
-/* 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;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.21;
   text-decoration: none;
+  padding: 4px 0;
+  font-family: Inter, sans-serif;
 }
 
 .learn-more-link:hover {
-  text-decoration: underline;
+  color: var(--text-primary);
 }
 
-.right-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+.learn-more-link i {
+  width: 16px;
+  height: 16px;
 }
 
-/* Button styles */
-.skip-button {
-  padding: 8px 16px;
-  background: #353535;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
+.action-secondary {
+  height: 24px;
+  padding: 4px 0;
+  background: transparent;
   border: none;
-  color: #aeaeb2;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.21;
   cursor: pointer;
+  border-radius: 4px;
+  font-family: Inter, sans-serif;
 }
 
-.skip-button:hover {
-  background: #404040;
+.action-secondary:hover {
+  color: var(--text-primary);
 }
 
-.cta-button {
+.action-primary {
+  height: 40px;
   padding: 8px 16px;
-  background: white;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
+  background: var(--interface-menu-component-surface-hovered);
+  border-radius: var(--base-corner-radius-corner-radius-md, 8px);
   border: none;
-  color: black;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.21;
   cursor: pointer;
+  font-family: Inter, sans-serif;
 }
 
-.cta-button:hover {
-  background: #f0f0f0;
+.action-primary:hover {
+  background: var(--button-hover-surface);
 }
 </style>
diff --git a/src/platform/updates/components/WhatsNewPopup.test.ts b/src/platform/updates/components/WhatsNewPopup.test.ts
new file mode 100644
index 0000000000..24e5fb23e6
--- /dev/null
+++ b/src/platform/updates/components/WhatsNewPopup.test.ts
@@ -0,0 +1,216 @@
+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
+vi.mock('@/i18n', () => ({
+  t: (key: string, params?: Record<string, string>) => {
+    const translations: Record<string, string> = {
+      'g.close': 'Close',
+      'whatsNewPopup.later': 'Later',
+      'whatsNewPopup.update': 'Update',
+      'whatsNewPopup.learnMore': 'Learn More',
+      'whatsNewPopup.noReleaseNotes': 'No release notes available'
+    }
+    return params
+      ? `${translations[key] || key}:${JSON.stringify(params)}`
+      : translations[key] || key
+  },
+  d: (date: Date) => date.toLocaleDateString()
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    locale: { value: 'en' },
+    t: vi.fn((key: string) => {
+      const translations: Record<string, string> = {
+        'g.close': 'Close',
+        'whatsNewPopup.later': 'Later',
+        'whatsNewPopup.update': 'Update',
+        'whatsNewPopup.learnMore': 'Learn More',
+        'whatsNewPopup.noReleaseNotes': 'No release notes available'
+      }
+      return translations[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) => {
+            const translations: Record<string, string> = {
+              'g.close': 'Close',
+              'whatsNewPopup.later': 'Later',
+              'whatsNewPopup.update': 'Update',
+              'whatsNewPopup.learnMore': 'Learn More',
+              'whatsNewPopup.noReleaseNotes': 'No release notes available'
+            }
+            return translations[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
+  })
+
+  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'
+    )
+    const mockMarkdownRenderer = vi.mocked(mockMarkdownRendererModule)
+      .renderMarkdownToHtml as any
+    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 f1a5060b57..47f3f321ae 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -1,69 +1,56 @@
 <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"
+        :pt="{
+          root: {
+            style: {
+              border: '1px solid var(--interface-menu-stroke)',
+              background: 'var(--button-surface)'
+            }
+          },
+          icon: {
+            style: {
+              color: 'white'
+            }
+          }
+        }"
         @click="closePopup"
-      >
-        <div class="close-icon"></div>
-      </button>
+      />
 
-      <!-- Release Content -->
-      <div class="popup-content">
+      <!-- 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" v-html="formattedContent"></div>
+      </div>
 
-        <!-- Actions Section -->
-        <div class="popup-actions">
-          <a
-            class="learn-more-link"
-            :href="changelogUrl"
-            target="_blank"
-            rel="noopener,noreferrer"
-            @click="closePopup"
-          >
-            {{ $t('whatsNewPopup.learnMore') }}
-          </a>
-          <!-- TODO: CTA button -->
-          <!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
-        </div>
+      <!-- Modal Footer -->
+      <div
+        class="modal-footer flex justify-between items-center gap-4 px-4 pb-4"
+      >
+        <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"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -85,9 +72,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(
@@ -114,7 +101,21 @@ const formattedContent = computed(() => {
   }
 
   try {
-    return renderMarkdownToHtml(latestRelease.value.content)
+    const markdown = latestRelease.value.content
+
+    // 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')
+
+    return renderMarkdownToHtml(reorderedContent)
   } catch (error) {
     console.error('Error parsing markdown:', error)
     // Fallback to plain text with line breaks
@@ -139,11 +140,6 @@ const closePopup = async () => {
   hide()
 }
 
-// const handleCTA = async () => {
-//   window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
-//   await closePopup()
-// }
-
 // Initialize on mount
 onMounted(async () => {
   // Fetch releases if not already loaded
@@ -152,10 +148,11 @@ onMounted(async () => {
   }
 })
 
-// Expose methods for parent component
+// Expose methods for parent component and tests
 defineExpose({
   show,
-  hide
+  hide,
+  closePopup
 })
 </script>
 
@@ -170,165 +167,72 @@ 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: var(--corner-radius-corner-radius-md, 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;
-}
-
-.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;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0;
+  flex: 1;
 }
 
-.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;
-  margin-bottom: 8px;
+  color: var(--text-primary);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* 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;
+  color: var(--text-secondary);
+  font-family: Inter, sans-serif;
 }
 
 /* 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;
 }
@@ -343,110 +247,156 @@ 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;
+.content-text :deep(img) {
+  width: 100%;
+  height: 200px;
+  margin: 0 0 16px;
+  object-fit: cover;
+  display: block;
+  border-radius: 8px;
 }
 
-/* Media elements */
-.content-text :deep(img),
-.content-text :deep(video),
-.content-text :deep(iframe) {
-  width: calc(100% + 64px);
-  height: auto;
-  margin: 24px -32px;
-  display: block;
+.content-text :deep(img:first-child) {
+  margin: -1rem -1rem 16px;
+  width: calc(100% + 2rem);
+  border-top-left-radius: var(--corner-radius-corner-radius-md, 8px);
+  border-top-right-radius: var(--corner-radius-corner-radius-md, 8px);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.content-text :deep(img + h1) {
+  margin-top: 0;
+}
+
+.content-text :deep(h2) {
+  color: var(--text-primary);
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  line-height: 1.4;
 }
 
-/* Actions Section */
-.popup-actions {
+/* 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);
+}
+
+.learn-more-link i {
+  width: 16px;
+  height: 16px;
+}
+
+.action-secondary {
+  height: 32px;
+  padding: 4px 0;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2102;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.action-secondary:hover {
+  color: var(--text-primary);
 }
 
-.cta-button {
+.action-primary {
   height: 40px;
-  padding: 0 20px;
-  background: white;
-  border-radius: 6px;
-  outline: 1px solid #4e4e4e;
-  outline-offset: -1px;
+  padding: 8px 16px;
+  background: var(--interface-menu-component-surface-hovered);
+  border-radius: var(--base-corner-radius-corner-radius-md, 8px);
   border: none;
-  color: #121212;
+  color: var(--text-primary);
   font-size: 14px;
-  font-weight: 500;
+  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/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
deleted file mode 100644
index 0f8adeb609..0000000000
--- a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
+++ /dev/null
@@ -1,435 +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)
-  }))
-}))
-
-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')
-    })
-  })
-})