diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 70071e3e9..cfd91e92f 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useTranslation } from 'react-i18next';
 import { Tooltip, theme } from '@/shared/antd-imports';
-import { HolderOutlined, PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
+import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
 import type { NavItem } from '@/features/navigation/nav-registry.types';
 import './nav-rail.css';
 
@@ -20,9 +21,7 @@ interface NavRailItemProps {
 }
 
 // Fires `action` on Enter/Space, mirroring a native <button>'s keyboard
-// behavior for the plain <span role="button"> affordances below (real
-// <button> elements can't nest inside the outer item, which is itself
-// interactive — nested buttons are invalid HTML).
+// behavior for the plain <span role="button"> affordances below.
 const activateOnKey = (action: () => void) => (e: React.KeyboardEvent) => {
   if (e.key === 'Enter' || e.key === ' ') {
     e.preventDefault();
@@ -43,117 +42,229 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   onTogglePin,
 }) => {
   const { token } = theme.useToken();
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+  const { t } = useTranslation('home');
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
     id: item.key,
     disabled: !draggable,
   });
 
-  // Matches PlannerLeftSidebar.tsx's existing fix for antd Tooltip's dark
-  // chip reading as a mismatched box against a light-mode rail — reused here
-  // so every surface gets the same theme-matched tooltip instead of each
-  // rewriting the same workaround.
-  const tooltipProps = {
-    color: isDark ? undefined : '#fff',
-    styles: { body: isDark ? undefined : { color: token.colorText, boxShadow: '0 2px 8px rgba(0,0,0,.15)' } },
-  };
-
-  // `soon` items are non-clickable by default; `soonClickable` opts a
-  // specific item (e.g. Client Portal's Ticketing) out of that while
-  // keeping the dimmed styling and "Soon" tag below.
   const clickDisabled = item.soon && !item.soonClickable;
 
   const tooltipTitle = isPinned ? `${label} (Pinned)` : label;
+  const iconColor = active
+    ? token.colorPrimary
+    : isDark
+      ? 'rgba(255,255,255,.45)'
+      : 'rgba(0,0,0,.45)';
 
-  const iconColor = active ? token.colorPrimary : isDark ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.45)';
+  // ─── Memoized styles ────────────────────────────────────────────────────────
 
-  const wrapperStyle: React.CSSProperties = {
-    position: 'relative',
-    width: '100%',
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 1 : undefined,
-  };
+  const wrapperStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      width: '100%',
+      transform: CSS.Transform.toString(transform),
+      transition,
+      opacity: isDragging ? 0.5 : 1,
+      zIndex: isDragging ? 1 : undefined,
+      // Pass token colors to CSS for pure-CSS hover glow (zero JS re-renders on hover)
+      '--nav-rail-color-primary': token.colorPrimary,
+      '--nav-rail-glow': token.colorPrimary,
+    } as React.CSSProperties),
+    [transform, transition, isDragging, token.colorPrimary],
+  );
 
-  // Affordances (pin, drag handle) are always in the DOM — visibility is
-  // driven by CSS :hover/:focus-within (see nav-rail.css) so a keyboard user
-  // tabbing to them can actually find and use them, not just a mouse user.
-  const affordanceClassName = `nav-rail-affordance${isPinned ? ' nav-rail-affordance-visible' : ''}`;
+  const buttonStyle = useMemo(
+    () => ({
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 3,
+      width: '100%',
+      padding: collapsed ? '3px 2px' : '6px 4px 6px',
+      cursor: clickDisabled ? 'default' : 'pointer',
+      opacity: item.soon ? 0.45 : 1,
+      position: 'relative' as const,
+      background: 'transparent',
+    }),
+    [collapsed, clickDisabled, item.soon],
+  );
+
+  // Pin icon colour: primary when already pinned, muted otherwise.
+  // The :hover glow and color are handled in CSS without re-renders.
+  const pinIconColor = useMemo(
+    () => (isPinned ? token.colorPrimary : isDark ? 'rgba(255,255,255,.40)' : 'rgba(0,0,0,.35)'),
+    [isPinned, isDark, token.colorPrimary],
+  );
 
-  const togglePin = () => onTogglePin();
+  const pinIconStyle = useMemo(
+    () => ({
+      fontSize: 10,
+      color: pinIconColor,
+      transition: 'color .15s',
+    }),
+    [pinIconColor],
+  );
+
+  const pinWrapperStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      // Top-left corner — clear of badge (top-right) and Soon tag (right side)
+      top: 4,
+      left: 4,
+      width: 16,
+      height: 16,
+      borderRadius: token.borderRadiusSM,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 3,
+      cursor: 'pointer',
+    }),
+    [token.borderRadiusSM],
+  );
+
+  const tooltipProps = useMemo(
+    () => ({
+      color: isDark ? undefined : '#fff',
+      styles: {
+        body: isDark ? undefined : { color: token.colorText, boxShadow: '0 2px 8px rgba(0,0,0,.15)' },
+      },
+    }),
+    [isDark, token.colorText],
+  );
+
+  // ─── Stable callbacks ────────────────────────────────────────────────────────
+
+  const handleSelect = useCallback(() => {
+    if (!clickDisabled) onSelect();
+  }, [clickDisabled, onSelect]);
+
+  // Keep navigation activation strictly on Enter or Space for the item itself.
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleSelect();
+      }
+    },
+    [handleSelect],
+  );
+
+  // Pin click: stop propagation so surrounding elements don't trigger.
+  const handlePinClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onTogglePin();
+    },
+    [onTogglePin],
+  );
+
+  const handlePinKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      activateOnKey(onTogglePin)(e);
+    },
+    [onTogglePin],
+  );
+
+  // Intercept DnD pointer events on the pin so they don't start a drag.
+  const handlePinPointerDown = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const handleReorderKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      listeners?.onKeyDown?.(e);
+    },
+    [listeners],
+  );
+
+  const reorderLabel = t('customize.dragHandle', {
+    defaultValue: 'Reorder {{name}}. Press space to pick up, then use the arrow keys.',
+    name: typeof item.label === 'string' ? item.label : item.label.defaultValue,
+  });
 
   return (
     <div ref={setNodeRef} style={wrapperStyle} className="nav-rail-item-wrapper">
-      <Tooltip title={tooltipTitle} placement="right" mouseEnterDelay={0.3} mouseLeaveDelay={0} {...tooltipProps}>
-        {/* A <div> with button semantics, not a real <button> — it hosts the
-            pin/drag-handle affordances below, and nested <button>s inside a
-            <button> are invalid HTML. */}
+      {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ──
+          Positioned as an independent sibling outside the interactive sortable item. */}
+      <span
+        role="button"
+        tabIndex={0}
+        aria-label={isPinned ? 'Unpin this view' : 'Pin as default view'}
+        title={isPinned ? 'Pinned as default' : 'Pin as default view'}
+        className={`nav-rail-pin-affordance ${active || isPinned ? 'nav-rail-pin-visible' : ''}`}
+        onClick={handlePinClick}
+        onKeyDown={handlePinKeyDown}
+        onPointerDown={handlePinPointerDown}
+        style={pinWrapperStyle}
+      >
+        {isPinned ? (
+          <PushpinFilled style={pinIconStyle} />
+        ) : (
+          <PushpinOutlined style={pinIconStyle} />
+        )}
+      </span>
+
+      {draggable && (
+        <button
+          ref={setActivatorNodeRef}
+          type="button"
+          {...attributes}
+          aria-label={reorderLabel}
+          title={reorderLabel}
+          className="nav-rail-affordance"
+          onKeyDown={handleReorderKeyDown}
+          style={{
+            ...pinWrapperStyle,
+            top: 'auto',
+            left: 'auto',
+            bottom: 4,
+            right: 4,
+            border: 'none',
+            padding: 0,
+            background: 'transparent',
+            color: isDark ? 'rgba(255,255,255,.40)' : 'rgba(0,0,0,.35)',
+            fontSize: 10,
+            cursor: 'grab',
+          }}
+        />
+      )}
+
+      {/* ── Navigation item (navigates on click/Enter/Space; whole item supports mouse drag) ── */}
+      <Tooltip
+        title={tooltipTitle}
+        placement="right"
+        mouseEnterDelay={0.3}
+        mouseLeaveDelay={0}
+        {...tooltipProps}
+      >
         <div
           role="button"
           tabIndex={clickDisabled ? -1 : 0}
           aria-disabled={clickDisabled}
-          onClick={() => !clickDisabled && onSelect()}
-          onKeyDown={activateOnKey(() => !clickDisabled && onSelect())}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 3,
-            width: '100%',
-            // Kept compact — on dense lists (e.g. Projects' 8 items, most
-            // with a "Soon" badge pinned to the item's top edge) taller
-            // padding pushes the centered icon/label away from that badge
-            // and inflates the gap between rows, which reads worse than a
-            // slightly-wide highlight.
-            padding: collapsed ? '3px 2px' : '6px 4px 6px',
-            cursor: clickDisabled ? 'default' : 'pointer',
-            opacity: item.soon ? 0.45 : 1,
-            transition: 'all .15s',
-            position: 'relative',
-          }}
+          onClick={handleSelect}
+          onKeyDown={handleKeyDown}
+          onPointerDown={draggable && listeners ? e => listeners.onPointerDown(e) : undefined}
+          style={buttonStyle}
         >
-          <span
-            role="button"
-            tabIndex={0}
-            className={affordanceClassName}
-            onClick={e => {
-              e.stopPropagation();
-              togglePin();
-            }}
-            onKeyDown={e => {
-              e.stopPropagation();
-              activateOnKey(togglePin)(e);
-            }}
-            title={isPinned ? 'Pinned as default' : 'Pin as default view'}
-            style={{
-              position: 'absolute',
-              top: 4,
-              left: 4,
-              width: 16,
-              height: 16,
-              borderRadius: 3,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: isPinned ? token.colorPrimaryBg : isDark ? 'rgba(255,255,255,.08)' : 'rgba(0,0,0,.06)',
-              zIndex: 2,
-              cursor: 'pointer',
-            }}
-          >
-            {isPinned ? (
-              <PushpinFilled style={{ fontSize: 9, color: token.colorPrimary }} />
-            ) : (
-              <PushpinOutlined style={{ fontSize: 9, color: isDark ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.45)' }} />
-            )}
-          </span>
-
+          {/* ── Unread badge ───────────────────────────────────────────────── */}
           {typeof badgeValue === 'number' && badgeValue > 0 && (
             <span
               style={{
                 position: 'absolute',
-                top: 5,
-                right: 7,
+                top: 4,
+                right: 5,
                 minWidth: 15,
                 height: 15,
                 borderRadius: 8,
@@ -166,103 +277,61 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
                 fontWeight: 700,
                 padding: '0 3px',
                 zIndex: 2,
+                pointerEvents: 'none',
               }}
             >
               {badgeValue > 99 ? '99+' : badgeValue}
             </span>
           )}
 
+          {/* ── Soon tag ───────────────────────────────────────────────────── */}
           {item.soon && (
             <span
               style={{
                 position: 'absolute',
-                top: 4,
+                top: 22,
                 right: 4,
                 fontSize: 8,
                 background: 'rgba(250,173,20,.15)',
                 color: '#d46b08',
-                borderRadius: 3,
+                borderRadius: token.borderRadiusSM,
                 padding: '1px 4px',
                 fontWeight: 600,
+                zIndex: 2,
+                pointerEvents: 'none',
               }}
             >
               Soon
             </span>
           )}
 
-          {/* No background fill for the active state — just the icon/label
-              color change below (iconColor already swaps to colorPrimary
-              when active). */}
+          {/* ── Nav icon (glows on hover via CSS drop-shadow, no background box) ── */}
           <span
+            className="nav-rail-item-icon"
             style={{
-              width: 24,
-              height: 24,
-              fontSize: 24,
               color: iconColor,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'color .15s',
             }}
           >
             {item.icon}
           </span>
 
+          {/* ── Label ─────────────────────────────────────────────────────── */}
           {!collapsed && (
             <span
+              className="nav-rail-item-label"
               style={{
-                fontSize: 11,
                 fontWeight: active ? 600 : 500,
-                textAlign: 'center',
-                lineHeight: 1.2,
                 color: iconColor,
-                whiteSpace: 'pre-line',
-                transition: 'color .15s',
               }}
             >
               {label}
             </span>
           )}
-
-          {draggable && (
-            <span
-              className="nav-rail-affordance"
-              {...attributes}
-              {...listeners}
-              onClick={e => e.stopPropagation()}
-              onKeyDown={e => {
-                // dnd-kit's own activation handler (Space/Enter) calls
-                // preventDefault but not stopPropagation — without this, the
-                // key event would also bubble up and trigger onSelect on the
-                // outer item, navigating away at the same moment a keyboard
-                // drag starts.
-                listeners?.onKeyDown?.(e);
-                if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
-              }}
-              aria-label={`Reorder ${typeof label === 'string' ? label : item.key}`}
-              style={{
-                position: 'absolute',
-                bottom: 2,
-                right: 2,
-                fontSize: 14,
-                color: token.colorPrimary,
-                background: token.colorBgContainer,
-                borderRadius: token.borderRadiusSM,
-                padding: '2px',
-                cursor: 'grab',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                zIndex: 2,
-              }}
-            >
-              <HolderOutlined />
-            </span>
-          )}
         </div>
       </Tooltip>
+
     </div>
   );
 };
 
-export default NavRailItem;
+export default React.memo(NavRailItem);
diff --git a/worklenz-frontend/src/components/nav-rail/nav-rail.css b/worklenz-frontend/src/components/nav-rail/nav-rail.css
index 51e41d0a3..43b1b96a1 100644
--- a/worklenz-frontend/src/components/nav-rail/nav-rail.css
+++ b/worklenz-frontend/src/components/nav-rail/nav-rail.css
@@ -10,19 +10,91 @@
   }
 }
 
-/* Pin + drag-handle affordances on a NavRailItem: always in the DOM (so a
-   keyboard user tabbing through can reach them), hidden until the item is
-   hovered or something inside it has focus, or the affordance is forced
-   visible (a pinned item's pin icon stays showing even without hover). */
-.nav-rail-affordance {
+/* ── Main nav icon & label glow (icon glows on hover, NO background highlight) ── */
+.nav-rail-item-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.18s ease, filter 0.18s ease;
+  overflow: visible;
+  filter: none;
+}
+
+.nav-rail-item-label {
+  font-size: 11px;
+  text-align: center;
+  line-height: 1.2;
+  white-space: pre-line;
+  transition: color 0.18s ease;
+}
+
+/* On item hover / focus: subtle, soft glow on the icon only, never the background */
+.nav-rail-item-wrapper:hover .nav-rail-item-icon,
+.nav-rail-item-wrapper:focus-within .nav-rail-item-icon {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+  filter: drop-shadow(0 0 3px rgba(24, 144, 255, 0.4));
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--nav-rail-glow, #1890ff) 45%, transparent));
+}
+
+.nav-rail-item-wrapper:hover .nav-rail-item-label,
+.nav-rail-item-wrapper:focus-within .nav-rail-item-label {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+}
+
+/* ── Pin affordance ────────────────────────────────────────────────────────
+   Always in DOM for accessibility. Shown when:
+   - item is active or pinned (.nav-rail-pin-visible)
+   - item is hovered or focused (.nav-rail-item-wrapper:hover / :focus-within)
+*/
+.nav-rail-pin-affordance {
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.15s;
+  transition: opacity 0.15s ease, filter 0.15s ease, color 0.15s ease;
+  overflow: visible;
+  filter: none;
 }
 
-.nav-rail-item-wrapper:hover .nav-rail-affordance,
-.nav-rail-item-wrapper:focus-within .nav-rail-affordance,
-.nav-rail-affordance.nav-rail-affordance-visible {
+.nav-rail-item-wrapper:hover .nav-rail-pin-affordance,
+.nav-rail-item-wrapper:focus-within .nav-rail-pin-affordance,
+.nav-rail-pin-affordance.nav-rail-pin-visible {
   opacity: 1;
   pointer-events: auto;
 }
+
+/* Soft glow and highlight on pin icon when hovered directly */
+.nav-rail-pin-affordance:hover,
+.nav-rail-pin-affordance:focus-visible {
+  filter: drop-shadow(0 0 2.5px rgba(24, 144, 255, 0.4));
+  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--nav-rail-glow, #1890ff) 45%, transparent));
+}
+
+.nav-rail-pin-affordance:hover .anticon,
+.nav-rail-pin-affordance:focus-visible .anticon {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+}
+
+/* ── Reorder handle affordance ─────────────────────────────────────────────
+   Keyboard-only reorder control (mouse users drag the whole item). It never
+   takes pointer events, so it can't cover the unread badge or Soon tag; it is
+   revealed only while it has keyboard focus. */
+.nav-rail-affordance {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.nav-rail-affordance:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--nav-rail-color-primary, #1890ff);
+  outline-offset: 1px;
+}
+
+.nav-rail-affordance:focus-visible::before {
+  content: '\22EE\22EE';
+  letter-spacing: -2px;
+  line-height: 1;
+}
+