diff --git a/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx b/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
index c3e8f62ec2..8270f9d5e2 100644
--- a/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
+++ b/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
@@ -7,7 +7,6 @@ import {
   OLDropdownToggle,
 } from '@/shared/components/ol/ol-dropdown-menu'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
-import { DropdownToggle } from 'react-bootstrap'
 
 type RailActionButton = {
   key: string
@@ -53,7 +52,7 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
           >
             <span>
               <OLDropdownToggle
-                ref={ref as React.ForwardedRef<typeof DropdownToggle>}
+                ref={ref}
                 id={`rail-dropdown-btn-${action.key}`}
                 className="ide-rail-tab-link ide-rail-tab-button ide-rail-tab-dropdown"
                 as="button"
diff --git a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu.tsx b/services/web/frontend/js/shared/components/ol/ol-dropdown-menu.tsx
index cb851ab933..2eb6308a94 100644
--- a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-dropdown-menu.tsx
@@ -156,7 +156,7 @@ export const OLDropdownToggleCustom = forwardRef<
 OLDropdownToggleCustom.displayName = 'OLDropdownToggleCustom'
 
 export const OLDropdownToggle = forwardRef<
-  typeof DropdownToggle,
+  HTMLButtonElement,
   OLDropdownToggleProps
 >((props, ref) => {
   const registerToggle = useContext(DropdownInternalContext)?.registerToggle
diff --git a/services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx b/services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx
index 2623dc9863..a5bff464f6 100644
--- a/services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx
+++ b/services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx
@@ -56,7 +56,9 @@ export function DsNavPageSwitcher({
             }
           >
             <BookBookmark size={24} />
-            <span>{t('library')}</span>
+            <span className="ds-nav-page-switcher-item-label">
+              {t('library')}
+            </span>
           </a>
         </li>
         <li>
@@ -74,7 +76,9 @@ export function DsNavPageSwitcher({
             }
           >
             <Folder size={24} />
-            <span>{t('projects')}</span>
+            <span className="ds-nav-page-switcher-item-label">
+              {t('projects')}
+            </span>
           </a>
         </li>
       </ul>
diff --git a/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx b/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx
index 50953e8f8e..9d1afdbc1e 100644
--- a/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx
+++ b/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx
@@ -1,4 +1,4 @@
-import { type Ref, useState } from 'react'
+import { type Ref } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Question, User } from '@phosphor-icons/react'
 import {
@@ -7,7 +7,7 @@ import {
   OLDropdownMenu,
 } from '@/shared/components/ol/ol-dropdown-menu'
 import getMeta from '@/utils/meta'
-import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import MaterialIcon from '@/shared/components/material-icon'
 import { NavDropdownMenuItems } from '@/shared/components/navbar/nav-dropdown-from-data'
 import { NavbarDropdownItemData } from '@/shared/components/types/navbar'
 import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
@@ -22,13 +22,11 @@ export function SidebarLowerSection({
   children,
 }: {
   showThemeToggle?: boolean
-  accountRef?: Ref<HTMLDivElement>
+  accountRef?: Ref<HTMLButtonElement>
   onAccountOpen?: () => void
   children?: React.ReactNode
 }) {
   const { t } = useTranslation()
-  const [showAccountDropdown, setShowAccountDropdown] = useState(false)
-  const [showHelpDropdown, setShowHelpDropdown] = useState(false)
   const { showModal: showContactUsModal, modal: contactUsModal } =
     useContactUsModal({
       autofillProjectUrl: false,
@@ -41,92 +39,84 @@ export function SidebarLowerSection({
   return (
     <>
       {children}
-      <nav
-        className="d-flex flex-row gap-3 mb-2"
-        aria-label={t('account_help')}
-      >
-        {helpItem && (
-          <OLDropdown
-            className="ds-nav-icon-dropdown"
-            align="end"
-            onToggle={show => {
-              setShowHelpDropdown(show)
-              if (show) {
-                sendMB('menu-expand', { item: 'help', location: 'sidebar' })
-              }
-            }}
-            role="menu"
-          >
-            <OLDropdownToggle role="menuitem" aria-label={t('help')}>
-              <OLTooltip
-                description={t('help')}
-                id="help-icon"
-                overlayProps={{
-                  placement: 'top',
-                }}
-                hidden={showHelpDropdown}
-              >
-                <div>
-                  <Question size={24} />
-                </div>
-              </OLTooltip>
-            </OLDropdownToggle>
-            <OLDropdownMenu
-              popperConfig={{
-                modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
+      <nav aria-label={t('account_help')}>
+        <ul className="list-unstyled ds-nav-dropdown-list">
+          {helpItem && (
+            <OLDropdown
+              as="li"
+              role="none"
+              className="ds-nav-dropdown"
+              align="end"
+              onToggle={show => {
+                if (show) {
+                  sendMB('menu-expand', { item: 'help', location: 'sidebar' })
+                }
               }}
             >
-              <NavDropdownMenuItems
-                dropdown={helpItem.dropdown}
-                showContactUsModal={showContactUsModal}
-                location="sidebar"
-              />
-            </OLDropdownMenu>
-          </OLDropdown>
-        )}
-        {sessionUser && (
-          <OLDropdown
-            className="ds-nav-icon-dropdown"
-            align="end"
-            onToggle={show => {
-              setShowAccountDropdown(show)
-              if (show) {
-                sendMB('menu-expand', {
-                  item: 'account',
-                  location: 'sidebar',
-                })
-                onAccountOpen?.()
-              }
-            }}
-            role="menu"
-          >
-            <OLDropdownToggle role="menuitem" aria-label={t('Account')}>
-              <OLTooltip
-                description={t('Account')}
-                id="open-account"
-                overlayProps={{
-                  placement: 'top',
-                }}
-                hidden={showAccountDropdown}
+              <OLDropdownToggle
+                role="menuitem"
+                className="ds-nav-page-switcher-item"
               >
-                <div ref={accountRef}>
-                  <User size={24} />
-                </div>
-              </OLTooltip>
-            </OLDropdownToggle>
-            <OLDropdownMenu
-              popperConfig={{
-                modifiers: [{ name: 'offset', options: { offset: [-50, 5] } }],
+                <Question size={24} />
+                <span className="ds-nav-page-switcher-item-label">
+                  {t('help')}
+                </span>
+                <MaterialIcon type="more_vert" />
+              </OLDropdownToggle>
+              <OLDropdownMenu
+                popperConfig={{
+                  modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
+                }}
+              >
+                <NavDropdownMenuItems
+                  dropdown={helpItem.dropdown}
+                  showContactUsModal={showContactUsModal}
+                  location="sidebar"
+                />
+              </OLDropdownMenu>
+            </OLDropdown>
+          )}
+          {sessionUser && (
+            <OLDropdown
+              as="li"
+              role="none"
+              className="ds-nav-dropdown"
+              align="end"
+              onToggle={show => {
+                if (show) {
+                  sendMB('menu-expand', {
+                    item: 'account',
+                    location: 'sidebar',
+                  })
+                  onAccountOpen?.()
+                }
               }}
             >
-              <AccountMenuItems
-                sessionUser={sessionUser}
-                showSubscriptionLink={showSubscriptionLink}
-                showThemeToggle={showThemeToggle}
-              />
-            </OLDropdownMenu>
-          </OLDropdown>
-        )}
+              <OLDropdownToggle
+                ref={accountRef}
+                role="menuitem"
+                className="ds-nav-page-switcher-item"
+              >
+                <User size={24} />
+                <span className="ds-nav-page-switcher-item-label">
+                  {t('Account')}
+                </span>
+                <MaterialIcon type="more_vert" />
+              </OLDropdownToggle>
+              <OLDropdownMenu
+                popperConfig={{
+                  modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
+                }}
+              >
+                <AccountMenuItems
+                  sessionUser={sessionUser}
+                  showSubscriptionLink={showSubscriptionLink}
+                  showThemeToggle={showThemeToggle}
+                />
+              </OLDropdownMenu>
+            </OLDropdown>
+          )}
+        </ul>
       </nav>
       <div className="ds-nav-ds-name" translate="no">
         <span>Digital Science</span>
diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
index abda0143c7..5ac3cf2364 100644
--- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
@@ -223,6 +223,14 @@ body {
         font-size: var(--font-size-03);
         text-decoration: none;
 
+        .ds-nav-page-switcher-item-label {
+          flex: 1 1 auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
         &:hover {
           background-color: var(--ds-nav-hover-bg);
           color: var(--ds-nav-color);
@@ -236,8 +244,16 @@ body {
         }
       }
 
+      .ds-nav-dropdown-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-02);
+        padding: 0;
+        margin: 0;
+      }
+
       .ds-nav-sidebar-lower {
-        padding: var(--spacing-05) var(--spacing-08) 0 var(--spacing-05);
+        padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
         border-top: solid 1px transparent;
 
         &.show-shadow {
@@ -411,14 +427,13 @@ body {
     }
   }
 
-  .ds-nav-icon-dropdown {
+  .ds-nav-dropdown {
     .dropdown-toggle {
-      color: var(--ds-nav-color);
+      width: 100%;
+      border: none;
       background: none;
-      height: 44px;
-      width: 44px;
-      padding: 0;
-      overflow: hidden;
+      font-weight: normal;
+      text-align: left;
 
       &:hover {
         background-color: var(--ds-nav-hover-bg);
@@ -432,17 +447,6 @@ body {
       &::after {
         display: none;
       }
-
-      > div {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .material-symbols {
-        vertical-align: middle;
-      }
     }
   }