diff --git a/web/app/components/detail-sidebar/__tests__/index.spec.tsx b/web/app/components/detail-sidebar/__tests__/index.spec.tsx
index cbbb85ddfdd..174375c0230 100644
--- a/web/app/components/detail-sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/detail-sidebar/__tests__/index.spec.tsx
@@ -92,7 +92,6 @@ describe('DetailSidebarFrame', () => {
   it('renders expanded detail content by default and registers the shortcut for focused inputs', () => {
     renderDetailSidebarFrame()
 
-    expect(screen.getByRole('complementary')).toHaveClass('w-62')
     expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
     expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
     expect(hotkeyRegistrations.get('Mod+B')?.options).toEqual(
@@ -105,8 +104,8 @@ describe('DetailSidebarFrame', () => {
 
     act(() => hotkeyRegistrations.get('Mod+B')?.handler())
 
-    expect(screen.getByRole('complementary')).toHaveClass('w-16')
     expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'false')
+    expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
   })
 
   it('collapses detail content from the top toggle and hides environment metadata', () => {
@@ -119,7 +118,6 @@ describe('DetailSidebarFrame', () => {
     renderDetailSidebarFrame()
     fireEvent.click(screen.getByTestId('detail-toggle'))
 
-    expect(screen.getByRole('complementary')).toHaveClass('w-16')
     expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'false')
     expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'false')
     expect(screen.queryByText('Environment tag')).not.toBeInTheDocument()
@@ -131,20 +129,17 @@ describe('DetailSidebarFrame', () => {
     fireEvent.click(screen.getByTestId('detail-toggle'))
     fireEvent.mouseEnter(screen.getByTestId('detail-top').parentElement!)
 
-    expect(screen.getByRole('complementary')).toHaveClass('w-16', 'overflow-visible')
     expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
     expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
     expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
   })
 
-  it('persists expansion without width animation when the hovered preview toggle is clicked', () => {
+  it('persists expansion when the hovered preview toggle is clicked', () => {
     renderDetailSidebarFrame()
     fireEvent.click(screen.getByTestId('detail-toggle'))
     fireEvent.mouseEnter(screen.getByTestId('detail-top').parentElement!)
     fireEvent.click(screen.getByTestId('detail-toggle'))
 
-    expect(screen.getByRole('complementary')).toHaveClass('w-62', 'transition-none')
-    expect(screen.getByRole('complementary')).not.toHaveClass('overflow-visible')
     expect(screen.getByTestId('detail-top')).toHaveAttribute('data-expand', 'true')
     expect(screen.getByTestId('detail-section')).toHaveAttribute('data-expand', 'true')
     expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('expand')
diff --git a/web/app/components/detail-sidebar/index.tsx b/web/app/components/detail-sidebar/index.tsx
index 89a3567a5d1..d4f7e2e3958 100644
--- a/web/app/components/detail-sidebar/index.tsx
+++ b/web/app/components/detail-sidebar/index.tsx
@@ -29,7 +29,13 @@ const secondarySidebarHelpTriggerIcon = (
 
 function SecondarySidebarHelpMenu({ triggerClassName }: { triggerClassName?: string }) {
   return (
-    <HelpMenu triggerIcon={secondarySidebarHelpTriggerIcon} triggerClassName={triggerClassName} />
+    <HelpMenu
+      triggerIcon={secondarySidebarHelpTriggerIcon}
+      triggerClassName={cn(
+        'size-8 border-0 bg-transparent shadow-none hover:bg-state-base-hover hover:text-text-secondary',
+        triggerClassName,
+      )}
+    />
   )
 }
 
@@ -150,7 +156,7 @@ export function DetailSidebarFrame({
           className={cn(
             !bottomNavigationExpanded
               ? 'flex w-full shrink-0 flex-col items-center gap-0.5 rounded-lg px-2 pt-1 pb-3'
-              : 'flex w-60 items-center justify-between bg-components-panel-bg py-3 pr-1 pl-3',
+              : 'flex w-60 items-center justify-between bg-components-panel-bg p-3',
           )}
         >
           {!bottomNavigationExpanded ? (
@@ -163,9 +169,7 @@ export function DetailSidebarFrame({
               <div className="flex min-w-0 items-center gap-1 overflow-hidden">
                 <AccountSection />
               </div>
-              <div className="flex shrink-0 items-center justify-center rounded-full p-1">
-                <SecondarySidebarHelpMenu />
-              </div>
+              <SecondarySidebarHelpMenu />
             </>
           )}
         </div>
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index c0acc04429f..59ea648e54d 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -688,32 +688,6 @@ describe('MainNav', () => {
     expect(screen.queryByRole('link', { name: /common.menus.deployments/ })).not.toBeInTheDocument()
   })
 
-  it('aligns the global navigation spacing with the main sidebar design', async () => {
-    mockInstalledApps = [createInstalledApp()]
-
-    const { container } = renderMainNav()
-
-    const mainNav = container.querySelector('aside')
-    expect(mainNav).toHaveClass('w-62', 'p-1')
-    expect(mainNav?.firstElementChild).toHaveClass('w-60')
-
-    const logoLink = screen.getByLabelText('Dify')
-    expect(logoLink).not.toHaveClass('px-2')
-    expect(logoLink.parentElement).toHaveClass('pt-3', 'pr-2', 'pb-2', 'pl-4')
-
-    const homeLink = screen.getByRole('link', { name: /common.mainNav.home/ })
-    expect(homeLink.closest('nav')).toHaveClass('isolate', 'flex', 'flex-col', 'gap-px', 'p-2')
-    expect(homeLink).toHaveClass('h-8', 'w-full', 'rounded-[10px]', 'px-2', 'py-1.5')
-
-    const webAppsButton = await screen.findByRole('button', { name: 'explore.sidebar.webApps' })
-    expect(webAppsButton.parentElement).toHaveClass('py-1', 'pr-2', 'pl-2')
-
-    const helpButton = screen.getByRole('button', { name: 'common.mainNav.help.openMenu' })
-    expect(helpButton.parentElement?.parentElement).toHaveClass('w-60')
-    expect(helpButton.parentElement?.parentElement).not.toHaveClass('w-full')
-    expect(helpButton.parentElement).toHaveClass('shrink-0', 'rounded-full', 'p-1')
-  })
-
   it('orders the Step-by-step Tour before the account and help actions', async () => {
     localStorage.setItem(STEP_BY_STEP_TOUR_SHELL_MODE_STORAGE_KEY, 'collapsed')