diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 91defe4..fbd68fa 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -3,7 +3,7 @@ name: Build
 on:
   pull_request:
     branches:
-      - main
+      - develop
     types:
       - opened
       - synchronize
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 9584fb1..c2f2f16 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -3,7 +3,7 @@ name: Test
 on:
   pull_request:
     branches:
-      - main
+      - develop
     types:
       - opened
       - synchronize
diff --git a/.github/workflows/validate-version.yml b/.github/workflows/validate-version.yml
index 6ed9cf1..ac38beb 100644
--- a/.github/workflows/validate-version.yml
+++ b/.github/workflows/validate-version.yml
@@ -3,7 +3,7 @@ name: Validate Version File
 on:
   pull_request:
     branches:
-      - main
+      - develop
     types: [opened, synchronize, reopened]
     paths-ignore:
       - '.github/workflows/**'
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index f818496..db4ed63 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -11,21 +11,18 @@
 
 ### Improvements
 
-- Added the tab icon next to each view title so the active workspace has clearer visual context.
-- Simplified retirement setup by removing employer match handling from retirement elections to reduce complexity, as it's not an amount taken out of your paycheck generally
-- Improved Key Metrics view accuracy
-	- Remaining-for-spending totals now match between Key Metrics and Pay Breakdown in yearly mode.
-	- The Bills metric was reworked as Recurring Expenses and now reflects the total of custom allocations, bills, deductions, and loan payments.
-- Improved account deletion behavior so linked items are handled more intelligently across all supported item types.
-- Reduced icon width to look cleaner, and replaced a few icons to make more sense in context
-- Reduced built application size by around 100MB
+- Plans now save automatically when closed, but can still be saved via shortcut or menubar task
+    - Note: If it's a new plan or demo plan that hasn't been saved yet it will still prompt to save
+- Reworked the view mode selector to take up less space, and no longer have an unnecessary favorites modal associated with it
+- Added a Pay Details button to Key Metrics screen as well
+- Increase icon line width for visibility
+- Reorganized the plan header to make it less cluttered
+- Header actions now switch between full buttons on wider windows and compact dropdowns on smaller screens
 
 
 ### Bug Fixes
 
-- Fixed deduction amount rounding/display inconsistencies (for example 9.30 no longer drifting to 9.31).
-- Fixed edit-form amount formatting so trailing zeros are preserved more consistently when editing existing bill and deduction values.
-- Added tighter decimal precision handling in amount entry fields to match what the UI can reliably display.
-- Fixed history overlay behavior for legacy entries so edits no longer appear as misleading empty-to-value changes.
-- Fixed a history overlay deletion bug where deleting an Initial tracked state row could delete the wrong item in stacked history.
-- Fixed tax settings history to actually break out the line item changes done
\ No newline at end of file
+- Fixed demo generation immediately causing pay breakdown to go into the negative if random Gross Income is on the lower end
+- Fixed off-center "Add Loan Payment" button when no loan items were added yet
+- Fixed new plan creation starting with only two view modes visible after exiting Setup Wizard
+- Fixed focused header action borders clipping near the sticky tab header edge
\ No newline at end of file
diff --git a/app_updates/v0.4.1-fixes.md b/app_updates/v0.4.1-fixes.md
deleted file mode 100644
index faa4477..0000000
--- a/app_updates/v0.4.1-fixes.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Few things needing fixing/updating across the app:
-
-- Key Metrics
-    - [x] Employer contributions are being counted towards "Your savings rate" on Key Metrics screen
-    - [x] Final "remaining for spending" amount is not aligning between Key Metrics and final Pay Breakdown "All that remains for spending" amount (Yearly view mode)
-    - [x] Need to rebrand "Bills" metric card as "Recurring Expenses", and then also include benefits Deductions and Loan payments into it, since right now it's only showing total "bill" items
-    - [x] Icons for metric cards not aligned with text
-- Account editor
-    - [x] When deleting an account with items associated with it, the app isn't picking up Savings contributions or Loans to be migrated to another account. 
-    - [x] Deleting an account should be more dynamic in picking up the associated items with the account, checking all items linked with that "account id" instead of using if/else statements to determine the items to delete
-- Bills view
-    - [x] Some rounding issues when setting up a Deduction. Tried adding one for "9.30" but it kept showing as "9.31" once saved. When going to edit screen, it is showing "9.3".
-    - [x] In Bill items, amount saved as "9.30" is working fine and shows as "9.30", but when going back to edit it appears as "9.3" (missing final 0 in formatting).
-    - [x] Need to limit amount entry decimal spaces to maybe 3, as that's the max that shows in the UI anyway when item is saved.
-- Savings view
-    - [x] Get rid of the employer match logic from Retirement plans, since it doesn't add much and I think makes it confusing. Employer match doesn't count against your pay, so it shouldn't really be dealt with here.
-- All views
-    - [x] Add the tab Icon into the Tab View next to the view title header
-    - [x] If a user has a plan from before the log was available, then editing existing items shows weird data in the first entry since the app thinks the item is 'new' perhaps
-- App optimizations
-    - Want to try and optimize the code so that the builds aren't so large (currently over 200MB)
-    - Chunking warnings in the build
-    ```
-    (!) Some chunks are larger than 500 kB after minification. Consider:
-    - Using dynamic import() to code-split the application
-    - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
-    - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
-    ```
\ No newline at end of file
diff --git a/electron/main.ts b/electron/main.ts
index 83ebf1c..08ca066 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -931,6 +931,16 @@ function createApplicationMenu() {
           }
         },
       },
+      {
+        label: 'Copy Plan',
+        accelerator: isMac ? 'Cmd+Shift+C' : 'Ctrl+Shift+C',
+        click: () => {
+          const focusedWindow = BrowserWindow.getFocusedWindow();
+          if (focusedWindow) {
+            sendMenuEvent(focusedWindow, MENU_EVENTS.copyPlan);
+          }
+        },
+      },
       { type: 'separator' },
       {
         label: 'Close Window',
@@ -998,7 +1008,7 @@ function createApplicationMenu() {
         },
       },
       {
-        label: 'Pay Options',
+        label: 'Pay Details',
         accelerator: isMac ? 'Cmd+Shift+P' : 'Ctrl+Shift+P',
         click: () => {
           const focusedWindow = BrowserWindow.getFocusedWindow();
@@ -1202,7 +1212,7 @@ function createApplicationMenu() {
 }
 
 /**
- * Handle closing a window with unsaved changes check
+ * Handle closing a window by attempting save-first behavior when unsaved changes exist.
  */
 async function handleCloseWindow(window: BrowserWindow) {
   try {
@@ -1211,23 +1221,21 @@ async function handleCloseWindow(window: BrowserWindow) {
     );
 
     if (hasUnsaved) {
-      const result = await dialog.showMessageBox(window, {
-        type: 'warning',
+      // Show "Do you want to save?" dialog for unsaved plans
+      const response = dialog.showMessageBoxSync(window, {
+        type: 'question',
         buttons: ['Save', "Don't Save", 'Cancel'],
         defaultId: 0,
         cancelId: 2,
-        title: 'Unsaved Changes',
-        message: 'You have unsaved changes',
-        detail: 'Do you want to save your plan before closing this window?',
+        title: 'Save Plan?',
+        message: 'This plan has unsaved changes. Do you want to save before closing?',
       });
 
-      if (result.response === 2) {
-        // Cancel
+      if (response === 2) {
+        // User clicked Cancel, don't close
         return;
-      }
-
-      if (result.response === 0) {
-        // Save
+      } else if (response === 0) {
+        // User clicked Save, attempt to save
         const saveSuccess = await window.webContents.executeJavaScript(
           `(async () => {
             if (typeof window.__requestSaveBeforeClose === 'function') {
@@ -1242,10 +1250,14 @@ async function handleCloseWindow(window: BrowserWindow) {
         );
 
         if (!saveSuccess) {
-          // Save failed or user canceled save dialog
+          dialog.showErrorBox(
+            'Save Failed',
+            'Could not save this plan. Please use File > Save (or Cmd/Ctrl+S) and try again.'
+          );
           return;
         }
       }
+      // If response === 1, user clicked "Don't Save" - proceed to close without saving
     }
 
     // Always save window state (size and active tab) even if content wasn't saved
@@ -1273,6 +1285,7 @@ async function handleCloseWindow(window: BrowserWindow) {
     console.error('Error checking unsaved changes:', error);
     dialog.showErrorBox('Close Error', 'Unable to verify save state. The window was not closed to prevent data loss.');
   }
+
 }
 
 // Save all window states before quitting
diff --git a/index.html b/index.html
index 4c75618..b4bf63b 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' http://localhost:* ws://localhost:* https://* wss://*; object-src 'none'; base-uri 'self'"
+    />
     <title>Paycheck Planner</title>
     <script>
       (function () {
diff --git a/package.json b/package.json
index 3322264..6151ec7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "paycheck-planner",
   "private": true,
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Desktop paycheck planning and budget management application.",
   "author": {
     "name": "Paycheck Planner",
diff --git a/src/App.tsx b/src/App.tsx
index c4f6519..8966d15 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import EncryptionSetup from './components/views/EncryptionSetup'
 import WelcomeScreen from './components/views/WelcomeScreen'
 import PlanDashboard from './components/PlanDashboard'
 import SettingsModal from './components/modals/SettingsModal'
+import { TransientStatusIndicator } from './components/_shared'
 import './App.css'
 
 const AboutModal = lazy(() => import('./components/modals/AboutModal'))
@@ -303,34 +304,15 @@ function App() {
           onClose={() => setShowKeyboardShortcuts(false)}
         />
       </Suspense>
-      {zoomIndicatorMessage && (
-        <div
-          className={`zoom-indicator ${zoomIndicatorAtLimit ? 'limit' : ''}`}
-          role="status"
-          aria-live="polite"
-          style={{
-            top: `${2.35 / currentZoomFactor}rem`,
-            right: `${1 / currentZoomFactor}rem`,
-            transform: `scale(${1 / currentZoomFactor})`,
-          }}
-        >
-          {zoomIndicatorMessage}
-        </div>
-      )}
-      {undoRedoMessage && (
-        <div
-          className="zoom-indicator"
-          role="status"
-          aria-live="polite"
-          style={{
-            top: `${2.35 / currentZoomFactor}rem`,
-            right: `${1 / currentZoomFactor}rem`,
-            transform: `scale(${1 / currentZoomFactor})`,
-          }}
-        >
-          {undoRedoMessage}
-        </div>
-      )}
+      <TransientStatusIndicator
+        message={zoomIndicatorMessage}
+        variant={zoomIndicatorAtLimit ? 'warning' : 'default'}
+        zoomFactor={currentZoomFactor}
+      />
+      <TransientStatusIndicator
+        message={undoRedoMessage}
+        zoomFactor={currentZoomFactor}
+      />
     </>
   )
 }
diff --git a/src/components/PlanDashboard/PlanDashboard.css b/src/components/PlanDashboard/PlanDashboard.css
index 698f5bb..ba1e155 100644
--- a/src/components/PlanDashboard/PlanDashboard.css
+++ b/src/components/PlanDashboard/PlanDashboard.css
@@ -145,10 +145,10 @@
   align-items: center;
   gap: 0.75rem;
   flex-wrap: wrap;
-  flex: 1 1 auto;
   min-width: 220px;
 }
 
+
 .plan-title-block {
   display: flex;
   flex-direction: column;
@@ -288,28 +288,26 @@
 
 .header-actions {
   display: flex;
-  gap: 2rem;
+  gap: 0.9rem;
   flex-wrap: wrap;
+  align-items: center;
   justify-content: flex-end;
   flex: 0 1 auto;
 }
 
 .header-btn-group {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 
-.view-mode-selector-wrap {
-  padding-bottom: 0;
-  max-width: 100%;
-}
-
 /* Header button styles - these are on the gradient background */
 .header-btn-secondary {
   background: var(--surface-header-tint);
   color: var(--text-inverse);
   border: 2px solid var(--border-header-soft);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-inverse) 8%, transparent);
+  height: fit-content;
 }
 
 .header-btn-secondary:hover:not(:disabled) {
@@ -415,17 +413,13 @@
   .header-actions {
     width: 100%;
     justify-content: stretch;
+    gap: 0.65rem;
   }
 
   .header-btn-group {
-    order: 1;
-    width: 100%;
-    justify-content: stretch;
-  }
-
-  .view-mode-selector-wrap {
     order: 2;
     width: 100%;
+    justify-content: stretch;
   }
 
   .header-btn-group > button {
diff --git a/src/components/PlanDashboard/PlanDashboard.tsx b/src/components/PlanDashboard/PlanDashboard.tsx
index 24fc414..51b6806 100644
--- a/src/components/PlanDashboard/PlanDashboard.tsx
+++ b/src/components/PlanDashboard/PlanDashboard.tsx
@@ -6,8 +6,9 @@ interface StatusToastState {
 }
 import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo, lazy, Suspense } from 'react';
 import { flushSync } from 'react-dom';
-import { Sheet, Copy, Eye, Lock, LockOpen, Save, FolderOpen, MessageSquareText } from 'lucide-react';
+import { Sheet, Copy, Eye, Lock, LockOpen, FolderOpen, MessageSquareText, Settings, Edit } from 'lucide-react';
 import { APP_CUSTOM_EVENTS, MENU_EVENTS } from '../../constants/events';
+import { APP_VERSION } from '../../constants/appMeta';
 import { useBudget } from '../../contexts/BudgetContext';
 import { useAppDialogs, useEncryptionSetupFlow, useFileRelinkFlow } from '../../hooks';
 import { FileStorageService } from '../../services/fileStorage';
@@ -20,13 +21,11 @@ import SavingsManager from '../tabViews/SavingsManager';
 import TaxBreakdown from '../tabViews/TaxBreakdown';
 import SettingsModal from '../modals/SettingsModal';
 import AccountsModal from '../modals/AccountsModal';
-import ViewModeSettingsModal from '../modals/ViewModeSettingsModal';
+import PaySettingsModal from '../modals/PaySettingsModal';
 import { PlanTabs, TabManagementModal } from './PlanTabs';
-import { Toast, Modal, Button, ConfirmDialog, ErrorDialog, FileRelinkModal, FormGroup, EncryptionConfigPanel, Dropdown, ViewModeSelector } from '../_shared';
+import { Toast, Modal, Button, ConfirmDialog, ErrorDialog, FileRelinkModal, FormGroup, EncryptionConfigPanel, Dropdown, ViewModeButton } from '../_shared';
 import { initializeTabConfigs, getVisibleTabs, getHiddenTabs, toggleTabVisibility, reorderTabs, normalizeLegacyTabId } from '../../utils/tabManagement';
 import { getPayFrequencyViewMode } from '../../utils/payPeriod';
-import { sanitizeFavoriteViewModes } from '../../utils/viewModePreferences';
-import type { SelectableViewMode } from '../../types/viewMode';
 import { useGlobalKeyboardShortcuts } from '../../hooks';
 import type { SearchResult } from '../../utils/planSearch';
 import { getActionHandler, type SearchActionContext } from '../../utils/searchRegistry';
@@ -98,10 +97,6 @@ const isElementVisibleInContainer = (element: HTMLElement, container: HTMLElemen
   );
 };
 
-const getFirstVisibleFavoriteMode = (favorites: SelectableViewMode[]): ViewMode => {
-  return favorites[0] as ViewMode;
-};
-
 const isEditableTarget = (target: EventTarget | null): boolean => {
   if (!(target instanceof HTMLElement)) {
     return false;
@@ -163,26 +158,20 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
   const [shouldScrollToRetirement, setShouldScrollToRetirement] = useState(false);
   const [pendingTabScroll, setPendingTabScroll] = useState<{ tab: TabId; position: TabScrollPosition } | null>(null);
   const [displayMode, setDisplayMode] = useState<ViewMode>(() => {
-    const favorites = sanitizeFavoriteViewModes(budgetData?.settings?.viewModeFavorites);
     if (budgetData?.settings?.displayMode) {
-      return favorites.includes(budgetData.settings.displayMode as never)
-        ? budgetData.settings.displayMode
-        : getFirstVisibleFavoriteMode(favorites);
+      return budgetData.settings.displayMode;
     }
 
-    const cadenceMode = getPayFrequencyViewMode(budgetData?.paySettings?.payFrequency ?? 'bi-weekly');
-    return favorites.includes(cadenceMode as never)
-      ? cadenceMode
-      : getFirstVisibleFavoriteMode(favorites);
+    return getPayFrequencyViewMode(budgetData?.paySettings?.payFrequency ?? 'bi-weekly');
   });
+  const [previewDisplayMode, setPreviewDisplayMode] = useState<ViewMode | null>(null);
   const [showCopyModal, setShowCopyModal] = useState(false);
   const [newYear, setNewYear] = useState('');
   const [copyYearError, setCopyYearError] = useState<string | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [settingsInitialSection, setSettingsInitialSection] = useState<string | undefined>(undefined);
-  const [showViewModeSettings, setShowViewModeSettings] = useState(false);
+  const [showPaySettingsModal, setShowPaySettingsModal] = useState(false);
   const [pendingPaySettingsFieldHighlight, setPendingPaySettingsFieldHighlight] = useState<string | undefined>(undefined);
-  const [paySettingsSearchRequestKey, setPaySettingsSearchRequestKey] = useState(0);
   const [pendingBillsSearchAction, setPendingBillsSearchAction] = useState<
     | 'add-bill'
     | 'add-deduction'
@@ -357,6 +346,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
 
     const normalizedViewMode = normalizeLegacyTabId(viewMode);
     if (normalizedViewMode && VALID_TABS.includes(normalizedViewMode)) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Restoring active tab from persisted context before paint.
       setActiveTab(normalizedViewMode);
       initializedTabContextRef.current = tabRestoreContext;
       return;
@@ -485,40 +475,26 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
   // Initialize tab position and display mode from budget settings
   useEffect(() => {
     if (budgetData?.settings?.tabPosition) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Mirrors persisted tab position into local UI state.
       setTabPosition(budgetData.settings.tabPosition);
     }
     if (budgetData?.settings?.tabDisplayMode) {
       setTabDisplayMode(budgetData.settings.tabDisplayMode);
     }
     if (budgetData?.settings?.displayMode) {
-      const favorites = sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites);
-      setDisplayMode(
-        favorites.includes(budgetData.settings.displayMode as never)
-          ? budgetData.settings.displayMode
-          : favorites[0],
-      );
+      setDisplayMode(budgetData.settings.displayMode);
     } else if (budgetData?.paySettings?.payFrequency) {
-      const favorites = sanitizeFavoriteViewModes(budgetData.settings?.viewModeFavorites);
-      const cadenceMode = getPayFrequencyViewMode(budgetData.paySettings.payFrequency);
-      setDisplayMode(favorites.includes(cadenceMode as never) ? cadenceMode : favorites[0]);
+      setDisplayMode(getPayFrequencyViewMode(budgetData.paySettings.payFrequency));
     }
+    setPreviewDisplayMode(null);
   }, [
+    budgetData?.settings,
     budgetData?.settings?.tabDisplayMode,
     budgetData?.settings?.tabPosition,
     budgetData?.settings?.displayMode,
-    budgetData?.settings?.viewModeFavorites,
     budgetData?.paySettings?.payFrequency,
   ]);
 
-  // When plan-specific favorites change, ensure displayMode is still in the list
-  useEffect(() => {
-    const favorites = sanitizeFavoriteViewModes(budgetData?.settings?.viewModeFavorites);
-    if (!favorites.includes(displayMode as never)) {
-      setDisplayMode(favorites[0]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [budgetData?.settings?.viewModeFavorites]);
-
   // Handle tab position changes
   const handleTabPositionChange = useCallback((newPosition: TabPosition) => {
     if (newPosition === tabPosition || !budgetData) return;
@@ -548,6 +524,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
   // Handle view display mode changes — persisted to settings so it survives frequency changes
   const handleDisplayModeChange = useCallback((newMode: ViewMode) => {
     if (newMode === displayMode || !budgetData) return;
+    setPreviewDisplayMode(null);
     setDisplayMode(newMode);
     updateBudgetSettings({
       ...budgetData.settings,
@@ -555,6 +532,35 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
     });
   }, [displayMode, budgetData, updateBudgetSettings]);
 
+  const handleDisplayModePreview = useCallback((newMode: ViewMode | null) => {
+    if (!newMode || newMode === displayMode) {
+      setPreviewDisplayMode(null);
+      return;
+    }
+
+    setPreviewDisplayMode(newMode);
+  }, [displayMode]);
+
+  const effectiveDisplayMode = previewDisplayMode ?? displayMode;
+
+  const openPayDetailsModal = useCallback(() => {
+    setPendingPaySettingsFieldHighlight(undefined);
+    setShowPaySettingsModal(true);
+  }, []);
+
+  const renderViewModeHeaderControl = () => (
+      <ViewModeButton
+        label="View Mode"
+        mode={effectiveDisplayMode}
+        selectedMode={displayMode}
+        onChange={handleDisplayModeChange}
+        onPreviewChange={handleDisplayModePreview}
+        highlightedValue={budgetData ? getPayFrequencyViewMode(budgetData.paySettings.payFrequency) : undefined}
+        highlightedLabel="Your pay frequency"
+        preferredPlacement="up"
+      />
+  );
+
   const ensureValidSavePath = useCallback(async (): Promise<boolean> => {
     const currentPath = budgetData?.settings?.filePath;
     if (!currentPath) return true;
@@ -574,19 +580,25 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
     return false;
   }, [budgetData?.settings?.filePath, promptActiveFileRelink]);
 
-  // Handle save with success toast
-  const handleSave = useCallback(async () => {
-    if (!budgetData) return;
+  // Open settings modal
+  const handleOpenSettings = useCallback(() => {
+    if (loading) return;
+    setSettingsInitialSection(undefined);
+    setShowSettings(true);
+  }, [loading]);
+
+  const performSave = useCallback(async (): Promise<boolean> => {
+    if (!budgetData) return false;
 
     if (missingActiveFile) {
       setStatusToast({ message: 'Locate moved file before saving this plan.', type: 'warning' });
-      return;
+      return false;
     }
 
     const canSaveToCurrentPath = await ensureValidSavePath();
     if (!canSaveToCurrentPath) {
       setStatusToast({ message: 'Plan file moved. Locate it or cancel relink before saving.', type: 'warning' });
-      return;
+      return false;
     }
 
     const success = await saveBudget(activeTab, {
@@ -598,11 +610,20 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         displayMode,
       },
     });
+
     if (success) {
       setStatusToast({ message: 'Saved successfully', type: 'success' });
+      return true;
     }
+
+    return false;
   }, [saveBudget, activeTab, budgetData, tabPosition, tabDisplayMode, displayMode, missingActiveFile, ensureValidSavePath]);
 
+  // Handle explicit save requests (toolbar/menu/keyboard)
+  const handleSave = useCallback(async () => {
+    await performSave();
+  }, [performSave]);
+
   const scrollTabToPosition = useCallback((tab: TabId, position: TabScrollPosition = 'top') => {
     const getScrollTop = (element: { scrollHeight: number }, nextPosition: TabScrollPosition) => {
       return nextPosition === 'bottom' ? element.scrollHeight : 0;
@@ -684,12 +705,16 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
       handleSaveRef.current?.();
     });
 
+    const unsubscribeCopy = window.electronAPI.onMenuEvent(MENU_EVENTS.copyPlan, () => {
+      setShowCopyModal(true);
+    });
+
     const unsubscribeSettings = window.electronAPI.onMenuEvent(MENU_EVENTS.openSettings, () => {
       setShowSettings(true);
     });
 
     const unsubscribePayOptions = window.electronAPI.onMenuEvent(MENU_EVENTS.openPayOptions, () => {
-      selectTab('breakdown', { resetBillsAnchor: true });
+      openPayDetailsModal();
     });
 
     const unsubscribeAccounts = window.electronAPI.onMenuEvent(MENU_EVENTS.openAccounts, () => {
@@ -755,6 +780,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
       unsubscribeOpen();
       unsubscribeEncryption();
       unsubscribeSave();
+      unsubscribeCopy();
       unsubscribeSettings();
       unsubscribePayOptions();
       unsubscribeAccounts();
@@ -767,7 +793,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
       unsubscribeToggleDisplayMode();
       unsubscribeOpenSearch();
     };
-  }, [activeTab, createNewBudget, handleRedoAction, handleUndoAction, loadBudget, onResetSetup, scrollTabToTop, selectTab, viewMode, visibleTabs]);
+  }, [activeTab, createNewBudget, handleRedoAction, handleUndoAction, loadBudget, onResetSetup, openPayDetailsModal, scrollTabToTop, selectTab, viewMode, visibleTabs]);
 
   // Save session state when active tab or budget data changes
   useEffect(() => {
@@ -894,6 +920,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         planLoadingStartRef.current = Date.now();
       }
 
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Loading screen must toggle immediately while plan data is unavailable.
       setShowPlanLoadingScreen(true);
       return;
     }
@@ -1181,34 +1208,20 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         }
       } else if (action.type === 'open-pay-settings') {
         setPendingPaySettingsFieldHighlight(action.fieldHighlight);
-        setPaySettingsSearchRequestKey((prev) => prev + 1);
-        selectTab('breakdown', { resetBillsAnchor: true, revealIfHidden: true });
+        setShowPaySettingsModal(true);
       } else if (action.type === 'open-accounts') {
         setShowAccountsModal(true);
       } else if (action.type === 'open-settings') {
         setSettingsInitialSection(action.sectionId);
         setShowSettings(true);
       } else if (action.type === 'open-view-mode-settings') {
-        setShowViewModeSettings(true);
+        setSettingsInitialSection(undefined);
+        setShowSettings(true);
       }
     },
-    [openTabFromLink, selectTab, setPendingBillsSearchAction, setPendingBillsSearchTargetId, setBillsSearchRequestKey, setPendingLoansSearchAction, setPendingLoansSearchTargetId, setLoansSearchRequestKey, setPendingSavingsSearchAction, setPendingSavingsSearchTargetId, setSavingsSearchRequestKey, setTaxSearchOpenSettingsRequestKey, setShowAccountsModal, setShowSettings, setSettingsInitialSection, setScrollToAccountId, setPendingPaySettingsFieldHighlight, setPaySettingsSearchRequestKey],
+    [openTabFromLink, selectTab, setPendingBillsSearchAction, setPendingBillsSearchTargetId, setBillsSearchRequestKey, setPendingLoansSearchAction, setPendingLoansSearchTargetId, setLoansSearchRequestKey, setPendingSavingsSearchAction, setPendingSavingsSearchTargetId, setSavingsSearchRequestKey, setTaxSearchOpenSettingsRequestKey, setShowAccountsModal, setShowSettings, setSettingsInitialSection, setScrollToAccountId, setPendingPaySettingsFieldHighlight],
   );
 
-  const handleOpenViewModeSettings = useCallback(() => {
-    setShowViewModeSettings(true);
-  }, []);
-
-  const handleViewModeFavoritesChange = useCallback((newFavorites: SelectableViewMode[]) => {
-    if (!budgetData) return;
-    updateBudgetData({
-      settings: {
-        ...budgetData.settings,
-        viewModeFavorites: newFavorites,
-      },
-    });
-  }, [budgetData, updateBudgetData]);
-
   const handleOpenObjectHistory = useCallback((target: AuditHistoryTarget) => {
     setHistoryTarget(target);
   }, []);
@@ -1687,14 +1700,6 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           </div>
         </div>
         <div className="header-actions">
-          <ViewModeSelector
-            mode={displayMode}
-            onChange={handleDisplayModeChange}
-            favorites={sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites)}
-            payCadenceMode={getPayFrequencyViewMode(budgetData.paySettings.payFrequency)}
-            onOpenViewModeSettings={handleOpenViewModeSettings}
-            disabled={activeTab === 'metrics'}
-          />
           <div className="header-btn-group">
             <Button
               variant="secondary"
@@ -1710,21 +1715,11 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
               variant="secondary"
               size="small"
               className="header-btn-secondary"
-              onClick={() => setShowCopyModal(true)}
-              title="Copy this plan to another year"
+              onClick={handleOpenSettings}
+              disabled={!!missingActiveFile || activeRelinkLoading}
             >
-              <Copy className="ui-icon" aria-hidden="true" />
-              Copy Plan
-            </Button>
-            <Button
-              variant="secondary"
-              size="small"
-              onClick={handleSave}
-              disabled={loading || !!missingActiveFile || activeRelinkLoading}
-              className="header-btn-secondary"
-            >
-              <Save className="ui-icon" aria-hidden="true" />
-              Save
+              <Settings className="ui-icon" aria-hidden="true" />
+              Settings
             </Button>
           </div>
         </div>
@@ -1790,6 +1785,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           }}
         >
           <KeyMetrics
+            onOpenPayDetails={openPayDetailsModal}
             onNavigateToTaxes={() => {
               openTabFromLink('taxes');
             }}
@@ -1814,9 +1810,9 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           }}
         >
           <PayBreakdown 
-            displayMode={displayMode}
-            searchPaySettingsRequestKey={paySettingsSearchRequestKey}
-            searchPaySettingsFieldHighlight={pendingPaySettingsFieldHighlight}
+            displayMode={effectiveDisplayMode}
+            viewModeControl={activeTab === 'breakdown' ? renderViewModeHeaderControl() : undefined}
+            onOpenPayDetails={openPayDetailsModal}
             onNavigateToBills={(accountId) => {
               openTabFromLink('bills', { scrollToAccountId: accountId, scrollToRetirement: false });
             }}
@@ -1843,7 +1839,8 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
             searchActionRequestKey={billsSearchRequestKey}
             searchActionType={pendingBillsSearchAction}
             searchActionTargetId={pendingBillsSearchTargetId}
-            displayMode={displayMode}
+            displayMode={effectiveDisplayMode}
+            viewModeControl={activeTab === 'bills' ? renderViewModeHeaderControl() : undefined}
             onViewHistory={handleOpenObjectHistory}
           />
         </div>
@@ -1858,7 +1855,8 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
             searchActionRequestKey={loansSearchRequestKey}
             searchActionType={pendingLoansSearchAction}
             searchActionTargetId={pendingLoansSearchTargetId}
-            displayMode={displayMode}
+            displayMode={effectiveDisplayMode}
+            viewModeControl={activeTab === 'loans' ? renderViewModeHeaderControl() : undefined}
             onViewHistory={handleOpenObjectHistory}
           />
         </div>
@@ -1870,7 +1868,8 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         >
           <TaxBreakdown 
             searchOpenSettingsRequestKey={taxSearchOpenSettingsRequestKey}
-            displayMode={displayMode}
+            displayMode={effectiveDisplayMode}
+            viewModeControl={activeTab === 'taxes' ? renderViewModeHeaderControl() : undefined}
             onViewHistory={handleOpenObjectHistory}
           />
         </div>
@@ -1886,7 +1885,8 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
             searchActionRequestKey={savingsSearchRequestKey}
             searchActionType={pendingSavingsSearchAction}
             searchActionTargetId={pendingSavingsSearchTargetId}
-            displayMode={displayMode}
+            displayMode={effectiveDisplayMode}
+            viewModeControl={activeTab === 'savings' ? renderViewModeHeaderControl() : undefined}
             onViewHistory={handleOpenObjectHistory}
           />
         </div>
@@ -1995,7 +1995,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           isOpen={showFeedbackModal}
           onClose={() => setShowFeedbackModal(false)}
           context={{
-            appVersion: '1.0.0',
+            appVersion: APP_VERSION,
             activeTab,
             planYear: budgetData.year,
             planName: budgetData.name,
@@ -2009,19 +2009,12 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           }}
         />
       </Suspense>
-
-      <ViewModeSettingsModal
-        isOpen={showViewModeSettings}
-        onClose={() => setShowViewModeSettings(false)}
-        favorites={sanitizeFavoriteViewModes(budgetData.settings.viewModeFavorites)}
-        onChange={handleViewModeFavoritesChange}
-      />
-
       {/* Edit Plan Metadata Modal */}
       <Modal
         isOpen={showPlanEditModal}
         onClose={handleCancelPlanEdit}
         header="Edit Plan Name and Year"
+        headerIcon={<Edit className="ui-icon" aria-hidden="true" />}
         footer={
           <>
             <Button type="button" variant="secondary" onClick={handleCancelPlanEdit}>
@@ -2115,6 +2108,7 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
           setNewYear('');
         }}
         header="Copy Plan to New Year"
+        headerIcon={<Copy className="ui-icon" aria-hidden="true" />}
         footer={
           <>
             <Button
@@ -2164,6 +2158,16 @@ const PlanDashboard: React.FC<PlanDashboardProps> = ({ onResetSetup, viewMode, o
         initialSectionId={settingsInitialSection}
       />
 
+      <PaySettingsModal
+        isOpen={showPaySettingsModal}
+        onClose={() => {
+          setShowPaySettingsModal(false);
+          setPendingPaySettingsFieldHighlight(undefined);
+        }}
+        searchFieldHighlight={pendingPaySettingsFieldHighlight}
+        onViewHistory={handleOpenObjectHistory}
+      />
+
       {/* Encryption Setup Modal */}
       <Modal
         isOpen={showEncryptionSetup && !!budgetData}
diff --git a/src/components/PlanDashboard/PlanHistoryOverlay/PlanHistoryOverlay.css b/src/components/PlanDashboard/PlanHistoryOverlay/PlanHistoryOverlay.css
index 8d12dc4..8cb6f88 100644
--- a/src/components/PlanDashboard/PlanHistoryOverlay/PlanHistoryOverlay.css
+++ b/src/components/PlanDashboard/PlanHistoryOverlay/PlanHistoryOverlay.css
@@ -1,7 +1,7 @@
 .plan-history-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1900;
+  z-index: 2000;
   background: color-mix(in srgb, var(--bg-primary) 45%, transparent);
   backdrop-filter: blur(4px);
   display: flex;
diff --git a/src/components/PlanDashboard/PlanTabs/PlanTabs.css b/src/components/PlanDashboard/PlanTabs/PlanTabs.css
index a6ac2e8..6bac31c 100644
--- a/src/components/PlanDashboard/PlanTabs/PlanTabs.css
+++ b/src/components/PlanDashboard/PlanTabs/PlanTabs.css
@@ -83,9 +83,12 @@
 }
 
 .display-mode-toggle .toggle-icon {
-  font-size: 1rem;
+  font-size: 1.2rem;
   line-height: 1;
 }
+.display-mode-toggle .toggle-icon .ui-icon {
+  stroke-width: 2;
+}
 
 /* Tab button group with open-in-window button */
 .tab-button-group {
diff --git a/src/components/PlanDashboard/PlanTabs/PlanTabs.tsx b/src/components/PlanDashboard/PlanTabs/PlanTabs.tsx
index dd18e88..7d49fcf 100644
--- a/src/components/PlanDashboard/PlanTabs/PlanTabs.tsx
+++ b/src/components/PlanDashboard/PlanTabs/PlanTabs.tsx
@@ -168,7 +168,10 @@ const PlanTabs: React.FC<PlanTabsProps> = ({
           >
             <span className="toggle-icon">
               {/* TODO: Update the icon with a proper SVG or icon component later */}
-              {tabDisplayMode === 'icons-only' ? <PanelLeftOpen className="ui-icon" aria-hidden="true" /> : <PanelLeftClose className="ui-icon" aria-hidden="true" />}
+              {tabDisplayMode === 'icons-only' ? 
+                <PanelLeftOpen className="ui-icon" aria-hidden="true" /> : 
+                <PanelLeftClose className="ui-icon" aria-hidden="true" />
+              }
             </span>
           </button>
         )}
diff --git a/src/components/PlanDashboard/PlanTabs/TabManagementModal.tsx b/src/components/PlanDashboard/PlanTabs/TabManagementModal.tsx
index 121f2d1..dc43823 100644
--- a/src/components/PlanDashboard/PlanTabs/TabManagementModal.tsx
+++ b/src/components/PlanDashboard/PlanTabs/TabManagementModal.tsx
@@ -39,12 +39,8 @@ const TabManagementModal: React.FC<TabManagementModalProps> = ({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      header={
-          <h2 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', margin: 0 }}>
-            <LayoutList className="ui-icon" aria-hidden="true" />
-            Manage Tabs
-          </h2>
-        }
+      header="Manage Tabs"
+      headerIcon={<LayoutList className="ui-icon" aria-hidden="true" />}
       footer={
         <Button
           variant="primary"
diff --git a/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.css b/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.css
new file mode 100644
index 0000000..0aedcf8
--- /dev/null
+++ b/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.css
@@ -0,0 +1,83 @@
+.action-menu-button {
+  position: relative;
+}
+
+.action-menu-button__trigger {
+  position: relative;
+  padding-right: 2.4rem;
+}
+
+.action-menu-button__caret {
+  position: absolute;
+  right: 0.9rem;
+  top: 50%;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: translateY(-62%) rotate(45deg);
+  pointer-events: none;
+  transition: transform 0.18s ease;
+  opacity: 0.82;
+}
+
+.action-menu-button__caret--open {
+  transform: translateY(-38%) rotate(-135deg);
+}
+
+.action-menu-button__menu {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  right: 0;
+  min-width: 11.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.65rem;
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-lg);
+  padding: 0.35rem;
+  z-index: 35;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.action-menu-button__option {
+  border: none;
+  border-radius: 0.45rem;
+  background: transparent;
+  color: var(--text-primary);
+  padding: 0.5rem 0.6rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: left;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease;
+}
+
+.action-menu-button__option:hover,
+.action-menu-button__option:focus-visible {
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+  color: var(--text-accent);
+  outline: none;
+}
+
+.action-menu-button__option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .action-menu-button,
+  .action-menu-button__trigger {
+    width: 100%;
+  }
+
+  .action-menu-button__menu {
+    left: 0;
+    right: 0;
+    min-width: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.tsx b/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.tsx
new file mode 100644
index 0000000..c2637d3
--- /dev/null
+++ b/src/components/_shared/controls/ActionMenuButton/ActionMenuButton.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Button from '../Button';
+import './ActionMenuButton.css';
+
+export interface ActionMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+interface ActionMenuButtonProps {
+  label: string;
+  items: ActionMenuItem[];
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  leadingIcon?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  menuClassName?: string;
+  optionClassName?: string;
+}
+
+const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
+  label,
+  items,
+  variant = 'primary',
+  leadingIcon,
+  disabled = false,
+  className,
+  triggerClassName,
+  menuClassName,
+  optionClassName,
+}) => {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const closeMenu = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        closeMenu();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMenu();
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`action-menu-button ${className || ''}`.trim()}
+      onBlur={(event) => {
+        if (!rootRef.current?.contains(event.relatedTarget as Node)) {
+          closeMenu();
+        }
+      }}
+    >
+      <Button
+        variant={variant}
+        className={`action-menu-button__trigger ${triggerClassName || ''}`.trim()}
+        onClick={() => {
+          if (disabled) return;
+          setOpen((current) => !current);
+        }}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={disabled}
+      >
+        {leadingIcon}
+        {label}
+        <span className={`action-menu-button__caret${open ? ' action-menu-button__caret--open' : ''}`} aria-hidden="true" />
+      </Button>
+
+      {open && (
+        <div className={`action-menu-button__menu ${menuClassName || ''}`.trim()} role="menu" aria-label={label}>
+          {items.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className={`action-menu-button__option ${optionClassName || ''}`.trim()}
+              role="menuitem"
+              disabled={item.disabled}
+              onClick={() => {
+                if (item.disabled) return;
+                closeMenu();
+                item.onSelect();
+              }}
+            >
+              {item.icon}
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ActionMenuButton;
\ No newline at end of file
diff --git a/src/components/_shared/controls/ActionMenuButton/index.ts b/src/components/_shared/controls/ActionMenuButton/index.ts
new file mode 100644
index 0000000..4e6b8a9
--- /dev/null
+++ b/src/components/_shared/controls/ActionMenuButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ActionMenuButton';
+export type { ActionMenuItem } from './ActionMenuButton';
\ No newline at end of file
diff --git a/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.css b/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.css
new file mode 100644
index 0000000..f84b7c3
--- /dev/null
+++ b/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.css
@@ -0,0 +1,33 @@
+.transient-status-indicator {
+  position: fixed;
+  z-index: 2400;
+  min-width: 8.5rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 0.55rem;
+  border: 1px solid var(--border-accent-soft);
+  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
+  color: var(--text-primary);
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+  backdrop-filter: blur(6px);
+  transform-origin: top right;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.transient-status-indicator--warning {
+  border-color: var(--alert-warning-border);
+  background: color-mix(in srgb, var(--alert-warning-bg) 70%, var(--bg-primary) 30%);
+}
+
+@media (max-width: 768px) {
+  .transient-status-indicator {
+    right: 0.75rem !important;
+    left: 0.75rem;
+    top: 2.15rem !important;
+    text-align: center;
+  }
+}
diff --git a/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.tsx b/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.tsx
new file mode 100644
index 0000000..9d68cb8
--- /dev/null
+++ b/src/components/_shared/feedback/TransientStatusIndicator/TransientStatusIndicator.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import './TransientStatusIndicator.css';
+
+interface TransientStatusIndicatorProps {
+  message: string | null;
+  variant?: 'default' | 'warning';
+  topRem?: number;
+  rightRem?: number;
+  zoomFactor?: number;
+}
+
+const TransientStatusIndicator: React.FC<TransientStatusIndicatorProps> = ({
+  message,
+  variant = 'default',
+  topRem = 2.35,
+  rightRem = 1,
+  zoomFactor = 1,
+}) => {
+  if (!message) return null;
+
+  const safeZoomFactor = zoomFactor > 0 ? zoomFactor : 1;
+
+  return (
+    <div
+      className={`transient-status-indicator transient-status-indicator--${variant}`}
+      role="status"
+      aria-live="polite"
+      style={{
+        top: `${topRem / safeZoomFactor}rem`,
+        right: `${rightRem / safeZoomFactor}rem`,
+        transform: `scale(${1 / safeZoomFactor})`,
+      }}
+    >
+      {message}
+    </div>
+  );
+};
+
+export default TransientStatusIndicator;
diff --git a/src/components/_shared/feedback/TransientStatusIndicator/index.ts b/src/components/_shared/feedback/TransientStatusIndicator/index.ts
new file mode 100644
index 0000000..46b1eca
--- /dev/null
+++ b/src/components/_shared/feedback/TransientStatusIndicator/index.ts
@@ -0,0 +1 @@
+export { default } from './TransientStatusIndicator';
diff --git a/src/components/_shared/index.ts b/src/components/_shared/index.ts
index 8adc651..ccbece0 100644
--- a/src/components/_shared/index.ts
+++ b/src/components/_shared/index.ts
@@ -1,8 +1,11 @@
 export { default as Alert } from './feedback/Alert';
 export { default as AmountBreakdown, type AmountBreakdownItem, type AmountBreakdownProps } from './layout/AmountBreakdown';
 export { default as Toast } from './feedback/Toast';
+export { default as TransientStatusIndicator } from './feedback/TransientStatusIndicator';
 export { default as Modal } from './layout/Modal';
 export { default as Button } from './controls/Button';
+export { default as ActionMenuButton } from './controls/ActionMenuButton';
+export type { ActionMenuItem } from './controls/ActionMenuButton';
 export { default as FormGroup } from './controls/FormGroup';
 export { default as InputWithPrefix } from './controls/InputWithPrefix';
 export { default as DateInput } from './controls/DateInput';
@@ -21,6 +24,8 @@ export { default as AccountsEditor } from './workflows/AccountsEditor';
 export { default as TaxLinesEditor } from './workflows/TaxLinesEditor';
 export { default as EncryptionConfigPanel } from './workflows/EncryptionConfigPanel';
 export { default as ViewModeSelector } from './layout/ViewModeSelector';
+export { default as CompactViewModeSelector } from './layout/CompactViewModeSelector';
+export { default as ViewModeButton } from './layout/ViewModeButton';
 export { default as PageHeader } from './layout/PageHeader';
 export { default as Banner } from './layout/Banner';
 export { default as ProgressBar } from './feedback/ProgressBar';
diff --git a/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.css b/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.css
new file mode 100644
index 0000000..dad80f8
--- /dev/null
+++ b/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.css
@@ -0,0 +1,263 @@
+/* =============================================================================
+   CompactViewModeSelector  (.cvms)
+  Compact chip with left/right controls and a floating option panel.
+   ============================================================================= */
+
+/* ── Base wrapper ─────────────────────────────────────────────────────────── */
+.cvms {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 2.3rem;
+  user-select: none;
+  z-index: 2;
+}
+
+.cvms--open {
+  z-index: 5000;
+}
+
+/* ── Arrow buttons ─────────────────────────────────────────────────────────── */
+.cvms__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.4rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-radius: 0.25rem;
+  transition: color 0.15s, background 0.15s;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.cvms__arrow:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+}
+
+.cvms__arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Highlight indicator ─────────────────────────────────────────────────── */
+.cvms__indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  min-width: 0;
+  color: var(--text-secondary);
+}
+
+.cvms__indicator-dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent-primary) 78%, var(--bg-primary) 22%);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, var(--border-color) 78%);
+  flex-shrink: 0;
+}
+
+.cvms__indicator-text {
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  white-space: nowrap;
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--text-secondary);
+  transition: max-width 0.16s ease, opacity 0.12s ease;
+}
+
+/* ── Chip shell ───────────────────────────────────────────────────────────── */
+.cvms__chip {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  background: var(--bg-tertiary);
+  border: 2px solid var(--border-header-soft);
+  border-radius: 0.5rem;
+  overflow: visible;
+  transition: border-color 0.15s;
+  padding: 0.25rem;
+}
+
+.cvms--open .cvms__chip {
+  border-color: var(--border-accent-soft);
+}
+
+.cvms__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.6rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-accent);
+  white-space: nowrap;
+  transition: background 0.15s;
+  position: relative;
+  overflow: visible;
+}
+
+.cvms__trigger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+}
+
+.cvms__trigger-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-width: 6rem;
+}
+
+.cvms__trigger-label {
+  text-align: center;
+}
+
+.cvms__chevron {
+  transition: transform 0.2s ease;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.cvms__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ── Floating panel ───────────────────────────────────────────────────────── */
+.cvms__panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  z-index: 5010;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.6rem;
+  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 8%, transparent);
+  max-width: calc(100vw - 1rem);
+  overflow: visible;
+  isolation: isolate;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.cvms__panel--align-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%) translateY(-6px);
+}
+
+.cvms__panel--align-left {
+  left: 0;
+  right: auto;
+  transform: translateY(-6px);
+}
+
+.cvms__panel--align-right {
+  left: auto;
+  right: 0;
+  transform: translateY(-6px);
+}
+
+.cvms__panel > * {
+  position: relative;
+  z-index: 1;
+}
+
+.cvms--open .cvms__panel {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.cvms--open .cvms__panel--align-center {
+  transform: translateX(-50%) translateY(0);
+}
+
+.cvms--open .cvms__panel--align-left,
+.cvms--open .cvms__panel--align-right {
+  transform: translateY(0);
+}
+
+.cvms__panel--row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.15rem;
+  padding: 0.3rem;
+  white-space: nowrap;
+}
+
+.cvms__panel--column {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0.3rem;
+  white-space: normal;
+  width: min(13rem, calc(100vw - 1rem));
+}
+
+/* ── Option buttons inside the panel ──────────────────────────────────────── */
+.cvms__option {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  padding: 0.4rem 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  transition: background 0.12s, color 0.12s;
+  position: relative;
+  overflow: visible;
+}
+
+.cvms__option:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+  color: var(--text-primary);
+}
+
+.cvms__option--active {
+  background: var(--bg-tertiary);
+  color: var(--text-accent);
+  box-shadow: var(--shadow-sm);
+}
+
+.cvms__panel--column .cvms__option {
+  width: 100%;
+}
+
+.cvms__option-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.cvms__option-label {
+  min-width: 0;
+}
+
+.cvms__trigger:hover .cvms__indicator-text,
+.cvms__trigger:focus-visible .cvms__indicator-text,
+.cvms--open .cvms__trigger .cvms__indicator-text,
+.cvms__option:hover .cvms__indicator-text,
+.cvms__option:focus-visible .cvms__indicator-text,
+.cvms__option--active .cvms__indicator-text {
+  max-width: 7rem;
+  opacity: 1;
+}
diff --git a/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.tsx b/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.tsx
new file mode 100644
index 0000000..f1c56d6
--- /dev/null
+++ b/src/components/_shared/layout/CompactViewModeSelector/CompactViewModeSelector.tsx
@@ -0,0 +1,323 @@
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
+import type { SelectableViewMode, ViewMode } from '../../../../types/viewMode';
+import { SELECTABLE_VIEW_MODES } from '../../../../utils/viewModePreferences';
+import { getDisplayModeLabel } from '../../../../utils/payPeriod';
+import './CompactViewModeSelector.css';
+
+export interface CompactSelectorOption<T extends string = string> {
+    value: T;
+    label: string;
+}
+
+export interface CompactViewModeSelectorProps<T extends string = SelectableViewMode> {
+    /** Currently active view mode. */
+    mode: T | ViewMode;
+    onChange: (mode: T) => void;
+    options?: CompactSelectorOption<T>[];
+    /** Optional highlighted option shown with a subtle indicator in the selector/panel. */
+    highlightedValue?: T;
+    highlightedLabel?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+
+const defaultOptions: CompactSelectorOption<SelectableViewMode>[] = SELECTABLE_VIEW_MODES.map((mode) => ({
+    value: mode,
+    label: getDisplayModeLabel(mode),
+}));
+
+type CompactPanelLayout = 'row' | 'column';
+type CompactPanelAlignment = 'center' | 'left' | 'right';
+
+const CompactViewModeSelector = <T extends string = SelectableViewMode,>({
+    mode,
+    onChange,
+    options,
+    highlightedValue,
+    highlightedLabel = 'Highlighted',
+    disabled = false,
+    hidden = false,
+}: CompactViewModeSelectorProps<T>) => {
+    const [expanded, setExpanded] = useState(false);
+    const [panelLayout, setPanelLayout] = useState<CompactPanelLayout>('row');
+    const [panelAlignment, setPanelAlignment] = useState<CompactPanelAlignment>('center');
+    const containerRef = useRef<HTMLDivElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const closeTimeoutRef = useRef<number | null>(null);
+
+    const clearCloseTimeout = useCallback(() => {
+        if (closeTimeoutRef.current !== null) {
+            window.clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+
+    const openPanel = useCallback(() => {
+        if (disabled || hidden) return;
+        clearCloseTimeout();
+        if (!expanded) {
+            // Measure placement from a consistent baseline only when transitioning
+            // from closed -> open, so hover/focus within the open panel does not snap.
+            setPanelLayout('row');
+            setPanelAlignment('center');
+            setExpanded(true);
+        }
+    }, [clearCloseTimeout, disabled, hidden, expanded]);
+
+    const scheduleClosePanel = useCallback((delay = 140) => {
+        clearCloseTimeout();
+        closeTimeoutRef.current = window.setTimeout(() => {
+            setExpanded(false);
+            closeTimeoutRef.current = null;
+        }, delay);
+    }, [clearCloseTimeout]);
+
+    const resolvedOptions = (options ?? defaultOptions) as CompactSelectorOption<T>[];
+    const fallbackValue = resolvedOptions[0]?.value;
+    const activeMode = (mode === 'paycheck' ? highlightedValue ?? fallbackValue : (mode as T)) ?? fallbackValue;
+    const currentIndex = Math.max(
+        0,
+        resolvedOptions.findIndex((option) => option.value === activeMode),
+    );
+    const currentOption = resolvedOptions[currentIndex] ?? resolvedOptions[0];
+    const currentLabel = currentOption?.label ?? '';
+    const isHighlighted = activeMode === highlightedValue;
+
+    const triggerAriaLabel = isHighlighted && highlightedLabel
+        ? `View mode: ${currentLabel}, ${highlightedLabel}`
+        : `View mode: ${currentLabel}`;
+
+    const cycleMode = useCallback(
+        (direction: 1 | -1) => {
+            if (disabled) return;
+            const next =
+                (currentIndex + direction + resolvedOptions.length) %
+                resolvedOptions.length;
+            const nextOption = resolvedOptions[next];
+            if (nextOption) {
+                onChange(nextOption.value);
+            }
+        },
+        [currentIndex, disabled, onChange, resolvedOptions],
+    );
+
+    const handleSelect = useCallback(
+        (selected: T) => {
+            onChange(selected);
+            setExpanded(false);
+        },
+        [onChange],
+    );
+
+    // Close on outside click
+    useEffect(() => {
+        if (!expanded) return;
+        const handleDown = (e: MouseEvent) => {
+            if (!containerRef.current?.contains(e.target as Node)) {
+                setExpanded(false);
+            }
+        };
+        document.addEventListener('mousedown', handleDown);
+        return () => document.removeEventListener('mousedown', handleDown);
+    }, [expanded]);
+
+    useEffect(() => {
+        return () => {
+            clearCloseTimeout();
+        };
+    }, [clearCloseTimeout]);
+
+    useLayoutEffect(() => {
+        if (!expanded) {
+            return;
+        }
+
+        const updatePanelPlacement = () => {
+            const container = containerRef.current;
+            const panel = panelRef.current;
+            if (!container || !panel) {
+                return;
+            }
+
+            const viewportPadding = 8;
+            const viewportWidth = window.innerWidth;
+            const containerRect = container.getBoundingClientRect();
+            const rowWidth = Math.max(panel.scrollWidth, panel.getBoundingClientRect().width);
+
+            const centeredLeft = containerRect.left + (containerRect.width / 2) - (rowWidth / 2);
+            const centeredRight = centeredLeft + rowWidth;
+            if (centeredLeft >= viewportPadding && centeredRight <= viewportWidth - viewportPadding) {
+                setPanelLayout('row');
+                setPanelAlignment('center');
+                return;
+            }
+
+            const rightAnchoredLeft = containerRect.right - rowWidth;
+            if (rightAnchoredLeft >= viewportPadding) {
+                setPanelLayout('row');
+                setPanelAlignment('right');
+                return;
+            }
+
+            const leftAnchoredRight = containerRect.left + rowWidth;
+            if (leftAnchoredRight <= viewportWidth - viewportPadding) {
+                setPanelLayout('row');
+                setPanelAlignment('left');
+                return;
+            }
+
+            const columnWidth = Math.min(208, viewportWidth - (viewportPadding * 2));
+            const canAlignRightColumn = containerRect.right - columnWidth >= viewportPadding;
+            const canAlignLeftColumn = containerRect.left + columnWidth <= viewportWidth - viewportPadding;
+
+            let nextAlignment: CompactPanelAlignment = 'center';
+            if (canAlignRightColumn && (!canAlignLeftColumn || containerRect.right > viewportWidth / 2)) {
+                nextAlignment = 'right';
+            } else if (canAlignLeftColumn) {
+                nextAlignment = 'left';
+            }
+
+            setPanelLayout('column');
+            setPanelAlignment(nextAlignment);
+        };
+
+        updatePanelPlacement();
+        window.addEventListener('resize', updatePanelPlacement);
+
+        return () => {
+            window.removeEventListener('resize', updatePanelPlacement);
+        };
+    }, [expanded, resolvedOptions]);
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (disabled) return;
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                cycleMode(-1);
+            } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                cycleMode(1);
+            } else if (e.key === 'Escape') {
+                setExpanded(false);
+            }
+        },
+        [disabled, cycleMode],
+    );
+
+    return (
+        <div
+            style={{ display: hidden ? 'none' : undefined }}
+            ref={containerRef}
+            className={`cvms${expanded ? ' cvms--open' : ''}`}
+            onMouseEnter={openPanel}
+            onMouseLeave={() => scheduleClosePanel()}
+            onFocus={openPanel}
+            onBlur={(e) => {
+                if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+                    scheduleClosePanel(90);
+                }
+            }}
+            onKeyDown={handleKeyDown}
+        >
+            {/* ── Chip / trigger ── */}
+            <div className="cvms__chip">
+                <button
+                    className="cvms__arrow"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        cycleMode(-1);
+                    }}
+                    disabled={disabled}
+                    aria-label="Previous view mode"
+                    tabIndex={-1}
+                >
+                    <ChevronLeft className="ui-icon ui-icon-sm" aria-hidden="true" />
+                </button>
+
+                <button
+                    className="cvms__trigger"
+                    onClick={() => {
+                        if (disabled) return;
+                        clearCloseTimeout();
+                        setExpanded((v) => {
+                            const next = !v;
+                            if (next) {
+                                setPanelLayout('row');
+                                setPanelAlignment('center');
+                            }
+                            return next;
+                        });
+                    }}
+                    disabled={disabled}
+                    aria-haspopup="listbox"
+                    aria-expanded={expanded}
+                    aria-label={triggerAriaLabel}
+                >
+                    <span className="cvms__trigger-content">
+                        <span className="cvms__trigger-label">{currentLabel}</span>
+                        {isHighlighted && highlightedLabel && (
+                            <span className="cvms__indicator-dot" title={highlightedLabel} />
+                        )}
+                    </span>
+                    <ChevronDown
+                        className={`ui-icon ui-icon-sm cvms__chevron${expanded ? ' cvms__chevron--open' : ''}`}
+                        aria-hidden="true"
+                    />
+                </button>
+
+                <button
+                    className="cvms__arrow"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        cycleMode(1);
+                    }}
+                    disabled={disabled}
+                    aria-label="Next view mode"
+                    tabIndex={-1}
+                >
+                    <ChevronRight className="ui-icon ui-icon-sm" aria-hidden="true" />
+                </button>
+            </div>
+
+            {/* ── Floating panel ── */}
+            <div
+                ref={panelRef}
+                className={`cvms__panel cvms__panel--${panelLayout} cvms__panel--align-${panelAlignment}`}
+                role="listbox"
+                aria-label="Select view mode"
+                onMouseEnter={clearCloseTimeout}
+                onMouseLeave={() => scheduleClosePanel()}
+            >
+                {resolvedOptions.map((option) => {
+                    const optionHighlighted = highlightedValue === option.value && highlightedLabel;
+
+                    return (
+                        <button
+                            key={option.value}
+                            className={`cvms__option${option.value === activeMode ? ' cvms__option--active' : ''}${optionHighlighted ? ' cvms__option--highlighted' : ''}`}
+                            onClick={() => handleSelect(option.value)}
+                            disabled={disabled}
+                            role="option"
+                            aria-selected={option.value === activeMode}
+                            aria-label={optionHighlighted ? `${option.label}, ${highlightedLabel}` : option.label}
+                            tabIndex={expanded ? 0 : -1}
+                        >
+                            <span className="cvms__option-content">
+                                <span className="cvms__option-label">{option.label}</span>
+                                {optionHighlighted && (
+                                    <span className="cvms__indicator" aria-hidden="true">
+                                        <span className="cvms__indicator-dot" title={highlightedLabel} />
+                                    </span>
+                                )}
+                            </span>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default CompactViewModeSelector;
diff --git a/src/components/_shared/layout/CompactViewModeSelector/index.ts b/src/components/_shared/layout/CompactViewModeSelector/index.ts
new file mode 100644
index 0000000..498020c
--- /dev/null
+++ b/src/components/_shared/layout/CompactViewModeSelector/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CompactViewModeSelector';
+export type { CompactViewModeSelectorProps, CompactSelectorOption } from './CompactViewModeSelector';
diff --git a/src/components/_shared/layout/Modal/Modal.css b/src/components/_shared/layout/Modal/Modal.css
index 889d14a..f46a459 100644
--- a/src/components/_shared/layout/Modal/Modal.css
+++ b/src/components/_shared/layout/Modal/Modal.css
@@ -26,6 +26,20 @@
   -webkit-app-region: no-drag;
 }
 
+.modal-content .modal-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.modal-content .modal-header-icon {
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+}
+
 .modal-content h3 {
   margin: 0 0 0.5rem 0;
   color: var(--text-primary);
diff --git a/src/components/_shared/layout/Modal/Modal.tsx b/src/components/_shared/layout/Modal/Modal.tsx
index c595311..45c4cbc 100644
--- a/src/components/_shared/layout/Modal/Modal.tsx
+++ b/src/components/_shared/layout/Modal/Modal.tsx
@@ -16,11 +16,13 @@ interface ModalProps {
   footer?: React.ReactNode;
   /** Optional header title or custom header content */
   header?: React.ReactNode;
+  /** Optional header icon */
+  headerIcon?: React.ReactNode;
   /** Show close button in header (default: true) */
   showCloseButton?: boolean;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, contentClassName, children, footer, header, showCloseButton = true }) => {
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, contentClassName, children, footer, header, headerIcon, showCloseButton = true }) => {
   // Handle Escape key to close modal - use capture phase for reliability
   useEffect(() => {
     if (!isOpen) return;
@@ -48,7 +50,10 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, contentClassName, childr
       >
         {header && (
           <div className="modal-header">
-            {typeof header === 'string' ? <h2>{header}</h2> : header}
+            <div className="modal-header-title">
+              {headerIcon && <span className="modal-header-icon">{headerIcon}</span>}
+              {typeof header === 'string' ? <h2>{header}</h2> : header}
+            </div>
             {showCloseButton && (
               <Button 
                 variant="icon" 
diff --git a/src/components/_shared/layout/PageHeader/PageHeader.css b/src/components/_shared/layout/PageHeader/PageHeader.css
index 5eec5da..e9c6940 100644
--- a/src/components/_shared/layout/PageHeader/PageHeader.css
+++ b/src/components/_shared/layout/PageHeader/PageHeader.css
@@ -69,6 +69,16 @@
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
+  padding-top: 0.2rem;
+}
+
+/* Sticky headers can clip outward focus outlines at the scroll edge; use inset rings for header actions. */
+.page-header-actions .btn:focus-visible,
+.page-header-actions .btn:focus:not(:focus-visible),
+.page-header-actions .view-mode-button__trigger:focus-visible,
+.page-header-actions .action-menu-button__trigger:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-primary) 86%, white 14%);
 }
 
 @media (max-width: 768px) {
diff --git a/src/components/_shared/layout/ViewModeButton/ViewModeButton.css b/src/components/_shared/layout/ViewModeButton/ViewModeButton.css
new file mode 100644
index 0000000..8681e4f
--- /dev/null
+++ b/src/components/_shared/layout/ViewModeButton/ViewModeButton.css
@@ -0,0 +1,236 @@
+.view-mode-button {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.view-mode-button__trigger {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.55rem 2.4rem 0.55rem 0.95rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.55rem;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+  white-space: nowrap;
+  position: relative;
+}
+
+.view-mode-button__trigger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--bg-tertiary) 78%, var(--accent-primary) 22%);
+  border-color: var(--border-color-hover, var(--accent-primary));
+  box-shadow: var(--shadow-sm);
+}
+
+.view-mode-button__trigger:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.view-mode-button__trigger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.view-mode-button--open .view-mode-button__trigger {
+  border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-color));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 20%, transparent);
+}
+
+.view-mode-button__trigger-copy {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  justify-content: space-between;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+.view-mode-button__label {
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.view-mode-button__value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.94rem;
+  font-weight: 700;
+  color: var(--text-accent);
+}
+
+.view-mode-button__dot {
+  width: 0.46rem;
+  height: 0.46rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent-primary) 78%, var(--bg-primary) 22%);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 20%, var(--border-color) 80%);
+  flex-shrink: 0;
+}
+
+.view-mode-button__caret {
+  position: absolute;
+  right: 0.9rem;
+  top: 50%;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-right: 2px solid var(--text-secondary);
+  border-bottom: 2px solid var(--text-secondary);
+  transform: translateY(-62%) rotate(45deg);
+  pointer-events: none;
+  transition: border-color 0.2s, transform 0.18s ease;
+}
+
+.view-mode-button__trigger:hover:not(:disabled) .view-mode-button__caret,
+.view-mode-button__trigger:focus-visible .view-mode-button__caret,
+.view-mode-button--open .view-mode-button__caret {
+  border-right-color: var(--accent-primary);
+  border-bottom-color: var(--accent-primary);
+}
+
+.view-mode-button__caret--open {
+  transform: translateY(-38%) rotate(-135deg);
+}
+
+.view-mode-button__panel {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: min(100%, calc(100vw - 1rem));
+  padding: 0.4rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.7rem;
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 8%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-6px);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  z-index: 120;
+  max-height: min(22rem, calc(100vh - 1rem));
+  overflow-y: auto;
+}
+
+.view-mode-button__measure {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.view-mode-button__panel[data-placement="up"] {
+  top: auto;
+  bottom: calc(100% + 0.35rem);
+  transform: translateY(6px);
+}
+
+.view-mode-button--open .view-mode-button__panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.view-mode-button__hint {
+  padding: 0.2rem 0.35rem 0.4rem;
+  font-size: 0.68rem;
+  color: var(--text-secondary);
+}
+
+.view-mode-button__options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.view-mode-button__option {
+  width: 100%;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  padding: 0.48rem 0.6rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
+}
+
+.view-mode-button__option:hover,
+.view-mode-button__option:focus-visible,
+.view-mode-button__option--active {
+  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+  color: var(--text-accent);
+}
+
+.view-mode-button__option:focus-visible {
+  outline: none;
+}
+
+.view-mode-button__option--selected {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
+}
+
+.view-mode-button__option-main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.view-mode-button__option-label {
+  font-size: 0.84rem;
+  font-weight: 700;
+}
+
+.view-mode-button__option-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--text-secondary);
+  font-size: 0.68rem;
+  font-weight: 600;
+}
+
+.view-mode-button__check {
+  color: var(--accent-primary);
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .view-mode-button {
+    width: 100%;
+  }
+
+  .view-mode-button__trigger {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .view-mode-button__panel {
+    left: 0;
+    right: 0;
+    min-width: 0;
+    max-width: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/_shared/layout/ViewModeButton/ViewModeButton.tsx b/src/components/_shared/layout/ViewModeButton/ViewModeButton.tsx
new file mode 100644
index 0000000..fa89bb2
--- /dev/null
+++ b/src/components/_shared/layout/ViewModeButton/ViewModeButton.tsx
@@ -0,0 +1,291 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Check } from 'lucide-react';
+import type { SelectableViewMode, ViewMode } from '../../../../types/viewMode';
+import { SELECTABLE_VIEW_MODES } from '../../../../utils/viewModePreferences';
+import { getDisplayModeLabel } from '../../../../utils/payPeriod';
+import './ViewModeButton.css';
+
+export interface ViewModeButtonOption<T extends string = string> {
+  value: T;
+  label: string;
+}
+
+export interface ViewModeButtonProps<T extends string = SelectableViewMode> {
+  mode: T | ViewMode;
+  selectedMode?: T | ViewMode;
+  onChange: (mode: T) => void;
+  onPreviewChange?: (mode: T | null) => void;
+  options?: ViewModeButtonOption<T>[];
+  highlightedValue?: T;
+  highlightedLabel?: string;
+  label?: string;
+  preferredPlacement?: 'up' | 'down';
+  disabled?: boolean;
+}
+
+const defaultOptions: ViewModeButtonOption<SelectableViewMode>[] = SELECTABLE_VIEW_MODES.map((mode) => ({
+  value: mode,
+  label: getDisplayModeLabel(mode),
+}));
+
+const ViewModeButton = <T extends string = SelectableViewMode,>({
+  mode,
+  selectedMode,
+  onChange,
+  onPreviewChange,
+  options,
+  highlightedValue,
+  highlightedLabel = 'Pay frequency',
+  label = 'Amounts',
+  preferredPlacement = 'down',
+  disabled = false,
+}: ViewModeButtonProps<T>) => {
+  const [expanded, setExpanded] = useState(false);
+  const [placement, setPlacement] = useState<'up' | 'down'>(preferredPlacement);
+  const [lockedWidth, setLockedWidth] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+
+  const resolvedOptions = useMemo(
+    () => ((options ?? defaultOptions) as ViewModeButtonOption<T>[]),
+    [options],
+  );
+
+  const fallbackValue = resolvedOptions[0]?.value;
+  const activeMode = ((mode === 'paycheck' ? highlightedValue ?? fallbackValue : (mode as T)) ?? fallbackValue);
+  const committedMode = ((selectedMode ?? mode) === 'paycheck'
+    ? highlightedValue ?? fallbackValue
+    : ((selectedMode ?? mode) as T)) ?? fallbackValue;
+
+  const activeOption = resolvedOptions.find((option) => option.value === activeMode) ?? resolvedOptions[0];
+
+  const clearPreview = useCallback(() => {
+    onPreviewChange?.(null);
+  }, [onPreviewChange]);
+
+  const closePanel = useCallback(() => {
+    setExpanded(false);
+    clearPreview();
+  }, [clearPreview]);
+
+  useEffect(() => {
+    if (!expanded) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        closePanel();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closePanel();
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [closePanel, expanded]);
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      const measureRoot = measureRef.current;
+      if (!measureRoot) {
+        return;
+      }
+
+      const triggerWidths = Array.from(measureRoot.querySelectorAll<HTMLElement>('[data-measure-trigger]'));
+      const optionWidths = Array.from(measureRoot.querySelectorAll<HTMLElement>('[data-measure-option]'));
+      const widestTrigger = triggerWidths.reduce((max, element) => Math.max(max, element.offsetWidth), 0);
+      const widestOption = optionWidths.reduce((max, element) => Math.max(max, element.offsetWidth), 0);
+      const nextWidth = Math.ceil(Math.max(widestTrigger, widestOption));
+
+      if (nextWidth > 0) {
+        setLockedWidth(nextWidth);
+      }
+    };
+
+    measure();
+    window.addEventListener('resize', measure);
+
+    return () => {
+      window.removeEventListener('resize', measure);
+    };
+  }, [expanded, highlightedLabel, highlightedValue, label, resolvedOptions]);
+
+  useLayoutEffect(() => {
+    if (!expanded) {
+      return;
+    }
+
+    const updatePlacement = () => {
+      const container = containerRef.current;
+      const panel = panelRef.current;
+      if (!container || !panel) {
+        return;
+      }
+
+      const gap = 8;
+      const rect = container.getBoundingClientRect();
+      const panelHeight = panel.scrollHeight;
+      const spaceAbove = rect.top - gap;
+      const spaceBelow = window.innerHeight - rect.bottom - gap;
+
+      if (preferredPlacement === 'up') {
+        setPlacement(spaceAbove >= panelHeight || spaceAbove > spaceBelow ? 'up' : 'down');
+        return;
+      }
+
+      setPlacement(spaceBelow >= panelHeight || spaceBelow >= spaceAbove ? 'down' : 'up');
+    };
+
+    updatePlacement();
+    window.addEventListener('resize', updatePlacement);
+
+    return () => {
+      window.removeEventListener('resize', updatePlacement);
+    };
+  }, [expanded, preferredPlacement]);
+
+  const handlePreview = useCallback((nextMode: T) => {
+    if (disabled) return;
+    onPreviewChange?.(nextMode);
+  }, [disabled, onPreviewChange]);
+
+  const handleCommit = useCallback((nextMode: T) => {
+    if (disabled) return;
+    onChange(nextMode);
+    closePanel();
+  }, [closePanel, disabled, onChange]);
+
+  const showHighlightedDot = activeMode === highlightedValue;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`view-mode-button${expanded ? ' view-mode-button--open' : ''}`}
+      style={lockedWidth ? { width: `${lockedWidth}px` } : undefined}
+      onBlur={(event) => {
+        if (!containerRef.current?.contains(event.relatedTarget as Node)) {
+          closePanel();
+        }
+      }}
+    >
+      <button
+        type="button"
+        className="view-mode-button__trigger"
+        onClick={() => {
+          if (disabled) return;
+          setExpanded((current) => {
+            if (current) {
+              clearPreview();
+            }
+            return !current;
+          });
+        }}
+        aria-haspopup="menu"
+        aria-expanded={expanded}
+        aria-label={`${label}: ${activeOption?.label ?? ''}`}
+        disabled={disabled}
+      >
+        <span className="view-mode-button__trigger-copy">
+          <span className="view-mode-button__label">{label}</span>
+          <span className="view-mode-button__value">
+            {activeOption?.label}
+            {showHighlightedDot && <span className="view-mode-button__dot" aria-hidden="true" />}
+          </span>
+        </span>
+        <span
+          className={`view-mode-button__caret${expanded ? ' view-mode-button__caret--open' : ''}`}
+          aria-hidden="true"
+        />
+      </button>
+
+      <div
+        ref={panelRef}
+        className="view-mode-button__panel"
+        data-placement={placement}
+        role="menu"
+        aria-label="Select amount display mode"
+        onMouseLeave={clearPreview}
+      >
+        <div className="view-mode-button__hint">Hover to preview. Click to keep.</div>
+        <div className="view-mode-button__options">
+          {resolvedOptions.map((option) => {
+            const isActive = option.value === activeMode;
+            const isCommitted = option.value === committedMode;
+            const isHighlighted = option.value === highlightedValue;
+
+            return (
+              <button
+                key={option.value}
+                type="button"
+                className={`view-mode-button__option${isActive ? ' view-mode-button__option--active' : ''}${isCommitted ? ' view-mode-button__option--selected' : ''}`}
+                onMouseEnter={() => handlePreview(option.value)}
+                onFocus={() => handlePreview(option.value)}
+                onClick={() => handleCommit(option.value)}
+                role="menuitemradio"
+                aria-checked={isCommitted}
+              >
+                <span className="view-mode-button__option-main">
+                  <span className="view-mode-button__option-label">{option.label}</span>
+                  {isHighlighted && (
+                    <span className="view-mode-button__option-badge">
+                      <span className="view-mode-button__dot" aria-hidden="true" />
+                      {highlightedLabel}
+                    </span>
+                  )}
+                </span>
+                {isCommitted && <Check className="ui-icon ui-icon-sm view-mode-button__check" aria-hidden="true" />}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div ref={measureRef} className="view-mode-button__measure" aria-hidden="true">
+        {resolvedOptions.map((option) => {
+          const isHighlighted = option.value === highlightedValue;
+
+          return (
+            <React.Fragment key={option.value}>
+              <button type="button" className="view-mode-button__trigger" data-measure-trigger tabIndex={-1}>
+                <span className="view-mode-button__trigger-copy">
+                  <span className="view-mode-button__label">{label}</span>
+                  <span className="view-mode-button__value">
+                    {option.label}
+                    {isHighlighted && <span className="view-mode-button__dot" aria-hidden="true" />}
+                  </span>
+                </span>
+                <span className="view-mode-button__caret" aria-hidden="true" />
+              </button>
+
+              <div className="view-mode-button__option view-mode-button__option--selected" data-measure-option>
+                <span className="view-mode-button__option-main">
+                  <span className="view-mode-button__option-label">{option.label}</span>
+                  {isHighlighted && (
+                    <span className="view-mode-button__option-badge">
+                      <span className="view-mode-button__dot" aria-hidden="true" />
+                      {highlightedLabel}
+                    </span>
+                  )}
+                </span>
+                <Check className="ui-icon ui-icon-sm view-mode-button__check" aria-hidden="true" />
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ViewModeButton;
\ No newline at end of file
diff --git a/src/components/_shared/layout/ViewModeButton/index.ts b/src/components/_shared/layout/ViewModeButton/index.ts
new file mode 100644
index 0000000..1bdc0b9
--- /dev/null
+++ b/src/components/_shared/layout/ViewModeButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ViewModeButton';
+export type { ViewModeButtonProps, ViewModeButtonOption } from './ViewModeButton';
\ No newline at end of file
diff --git a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.css b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.css
index c2f6aee..03b9718 100644
--- a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.css
+++ b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.css
@@ -1,21 +1,16 @@
-.view-mode-selector-wrap {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding-bottom: 1.65rem;
-}
-
 .view-mode-selector {
   display: flex;
+  height: 2.3rem;
   gap: 0.5rem;
   background: var(--bg-tertiary);
   padding: 0.25rem;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   overflow: visible;
   border: 2px solid var(--border-header-soft);
 }
 
 .view-mode-selector button {
+  font-size: 0.85rem;
   margin: 0;
   display: inline-flex;
   align-items: center;
@@ -25,7 +20,7 @@
   padding: 0.5rem 1rem;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: 0.3rem;
   cursor: pointer;
   font-weight: 600;
   white-space: nowrap;
@@ -80,6 +75,7 @@
 }
 
 .view-mode-settings-button {
+  padding: 0.30rem 0.75rem !important;
   margin: 0;
   align-self: center;
   display: inline-flex;
@@ -94,6 +90,10 @@
   line-height: 1;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
+.view-mode-settings-button .ui-icon {
+  font-size: 1rem;
+  stroke-width: 2px;
+}
 
 .view-mode-settings-button:hover {
   background: var(--bg-primary);
@@ -122,11 +122,6 @@
     width: 100%;
   }
 
-  .view-mode-selector-wrap {
-    width: 100%;
-    padding-bottom: 1.8rem;
-  }
-
   .view-mode-selector button {
     flex: 1;
     font-size: 0.85rem;
diff --git a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.test.tsx b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.test.tsx
index 680991d..8767fb3 100644
--- a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.test.tsx
+++ b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.test.tsx
@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ViewModeSelector from './ViewModeSelector';
@@ -10,26 +10,13 @@ const DEFAULT_OPTIONS = [
 ];
 
 describe('ViewModeSelector', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
   it('renders default options when none provided', () => {
     render(<ViewModeSelector mode="weekly" onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Weekly' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Bi-weekly' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Semi-monthly' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Monthly' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Yearly' })).toBeInTheDocument();
-  });
-
-  it('injects pay cadence mode even when not favorited', () => {
-    render(
-      <ViewModeSelector
-        mode="weekly"
-        onChange={vi.fn()}
-        payCadenceMode="weekly"
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: 'WeeklyYour Pay Frequency' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Monthly' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Quarterly' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Yearly' })).toBeInTheDocument();
   });
 
@@ -55,19 +42,4 @@ describe('ViewModeSelector', () => {
     expect(screen.getByRole('button', { name: 'Option A' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Option B' })).toBeInTheDocument();
   });
-
-  it('shows settings shortcut and triggers callback when provided', async () => {
-    const onOpenViewModeSettings = vi.fn();
-
-    render(
-      <ViewModeSelector
-        mode="monthly"
-        onChange={vi.fn()}
-        onOpenViewModeSettings={onOpenViewModeSettings}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole('button', { name: 'Open view mode settings' }));
-    expect(onOpenViewModeSettings).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx
index d3fe719..e029381 100644
--- a/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx
+++ b/src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx
@@ -1,8 +1,5 @@
-import { useMemo } from 'react';
-import { Settings } from 'lucide-react';
-import type { SelectableViewMode } from '../../../../types/viewMode';
 import type { ViewMode } from '../../../../types/viewMode';
-import { buildViewModeSelectorOptions, sanitizeFavoriteViewModes } from '../../../../utils/viewModePreferences';
+import { SELECTABLE_VIEW_MODES } from '../../../../utils/viewModePreferences';
 import { getDisplayModeLabel } from '../../../../utils/payPeriod';
 import './ViewModeSelector.css';
 
@@ -15,11 +12,6 @@ interface ViewModeSelectorProps<T extends string = ViewMode> {
   mode: T;
   onChange: (mode: T) => void;
   options?: ViewModeOption<T>[];
-  /** Plan-specific favorites; when provided, skips internal app-settings reads. */
-  favorites?: SelectableViewMode[];
-  payCadenceMode?: T;
-  payCadenceLabel?: string;
-  onOpenViewModeSettings?: () => void;
   disabled?: boolean;
 }
 
@@ -27,70 +19,25 @@ const ViewModeSelector = <T extends string = ViewMode,>({
   mode,
   onChange,
   options,
-  favorites: favoritesProp,
-  payCadenceMode,
-  payCadenceLabel = 'Your Pay Frequency',
-  onOpenViewModeSettings,
   disabled = false,
 }: ViewModeSelectorProps<T>) => {
-  const favoriteModes = favoritesProp ?? sanitizeFavoriteViewModes(undefined);
-
-  const resolvedOptions = useMemo(() => {
-    if (options) {
-      return options as ViewModeOption<T>[];
-    }
-
-    return buildViewModeSelectorOptions(favoriteModes, payCadenceMode as never) as ViewModeOption<T>[];
-  }, [options, favoriteModes, payCadenceMode]);
-
-  const optionsWithCadence = useMemo(() => {
-    // Only auto-add cadence tab when the user has not explicitly configured
-    // favorites (favouritesProp absent). When plan-specific favorites are
-    // provided, the user's checkbox selection is the authoritative list.
-    if (!payCadenceMode || options || favoritesProp !== undefined) {
-      return resolvedOptions;
-    }
-
-    if (resolvedOptions.some((option) => option.value === payCadenceMode)) {
-      return resolvedOptions;
-    }
-
-    return [
-      {
-        value: payCadenceMode,
-        label: getDisplayModeLabel(payCadenceMode as ViewMode),
-      } as ViewModeOption<T>,
-      ...resolvedOptions,
-    ];
-  }, [payCadenceMode, options, favoritesProp, resolvedOptions]);
+  const resolvedOptions = options ?? (SELECTABLE_VIEW_MODES.map((value) => ({
+    value,
+    label: getDisplayModeLabel(value),
+  })) as ViewModeOption<T>[]);
 
   return (
-    <div className="view-mode-selector-wrap">
-      <div className="view-mode-selector">
-        {optionsWithCadence.map((option) => (
-          <button
-            key={option.value}
-            className={mode === option.value ? 'active' : ''}
-            onClick={() => onChange(option.value)}
-            disabled={disabled}
-          >
-            <span>{option.label}</span>
-            {payCadenceMode === option.value && (
-              <span className="view-mode-selector-cadence">{payCadenceLabel}</span>
-            )}
-          </button>
-        ))}
-        {!options && onOpenViewModeSettings && (
+    <div className="view-mode-selector">
+      {resolvedOptions.map((option) => (
         <button
-          className="view-mode-settings-button"
-          onClick={onOpenViewModeSettings}
-          aria-label="Open view mode settings"
-          title="Open view mode settings"
+          key={option.value}
+          className={`${mode === option.value ? 'active' : ''}`}
+          onClick={() => onChange(option.value)}
+          disabled={disabled}
         >
-          <Settings className="ui-icon ui-icon-sm" aria-hidden="true" />
+          <span>{option.label}</span>
         </button>
-      )}
-      </div>
+      ))}
     </div>
   );
 };
diff --git a/src/components/modals/AboutModal/AboutModal.tsx b/src/components/modals/AboutModal/AboutModal.tsx
index 11d450b..3038c25 100644
--- a/src/components/modals/AboutModal/AboutModal.tsx
+++ b/src/components/modals/AboutModal/AboutModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Building2, CalendarClock, ChartPie, Globe, PiggyBank, ShieldCheck } from 'lucide-react';
+import { BadgeQuestionMark, Building2, CalendarClock, ChartPie, Globe, PiggyBank, ShieldCheck } from 'lucide-react';
 import { Button, Modal } from '../../_shared';
+import { APP_VERSION, APP_NAME } from '../../../constants/appMeta';
 import './AboutModal.css';
 
 interface AboutModalProps {
@@ -13,7 +14,8 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      header="About Paycheck Planner"
+      header={`About ${APP_NAME}`}
+      headerIcon={<BadgeQuestionMark className="ui-icon" aria-hidden="true" />}
       contentClassName="about-modal"
       footer={
         <Button variant="primary" onClick={onClose}>
@@ -23,7 +25,7 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
     >
       <div className="about-intro">
         <h3>Plan where every paycheck goes</h3>
-        <p>Paycheck Planner helps you manage your finances with year-based planning, tracking exactly where your money goes from gross pay to net.</p>
+        <p>{APP_NAME} helps you manage your finances with year-based planning, tracking exactly where your money goes from gross pay to net.</p>
       </div>
 
       <div className="about-features">
@@ -47,7 +49,7 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
           <span className="about-feature-icon" aria-hidden="true"><ShieldCheck className="ui-icon" /></span>
           <div className="about-feature-content">
             <h4>Secure & Local</h4>
-            <p>Your data stays on your computer with optional encryption. No cloud sync, no data sharing—complete privacy and control.</p>
+            <p>Your data stays on your computer with optional encryption. No cloud sync, no data sharing, complete privacy and control.</p>
           </div>
         </div>
 
@@ -63,7 +65,7 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
           <span className="about-feature-icon" aria-hidden="true"><Building2 className="ui-icon" /></span>
           <div className="about-feature-content">
             <h4>Account Management</h4>
-            <p>Create and manage multiple accounts (checking, savings, investment) and associate them with your bills and allocations.</p>
+            <p>Create and manage multiple accounts (checking, savings, investment) and associate them with your bills and other allocations.</p>
           </div>
         </div>
 
@@ -77,7 +79,7 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
       </div>
 
       <div className="about-version">
-        <p><strong>Version:</strong> 1.0.0</p>
+        <p><strong>Version:</strong> {APP_VERSION}</p>
       </div>
     </Modal>
   );
diff --git a/src/components/modals/AccountsModal/AccountsModal.tsx b/src/components/modals/AccountsModal/AccountsModal.tsx
index 11b04b1..41cd1ec 100644
--- a/src/components/modals/AccountsModal/AccountsModal.tsx
+++ b/src/components/modals/AccountsModal/AccountsModal.tsx
@@ -5,6 +5,7 @@ import type { BudgetData } from '../../../types/budget';
 import { Modal, Button, FormGroup, AccountsEditor, Dropdown } from '../../_shared';
 import './AccountsModal.css';
 import './AccountsDeleteModal.css';
+import { Sheet } from 'lucide-react';
 
 interface AccountsModalProps {
   onClose: () => void;
@@ -217,6 +218,7 @@ const AccountsModal: React.FC<AccountsModalProps> = ({ onClose }) => {
         onClose={onClose}
         contentClassName="accounts-modal"
         header="Manage Your Accounts"
+        headerIcon={<Sheet className="ui-icon" aria-hidden="true" />}
         footer={
           <Button variant="primary" onClick={onClose}>
             Done
diff --git a/src/components/modals/FeedbackModal/FeedbackModal.tsx b/src/components/modals/FeedbackModal/FeedbackModal.tsx
index a5925c4..09bf562 100644
--- a/src/components/modals/FeedbackModal/FeedbackModal.tsx
+++ b/src/components/modals/FeedbackModal/FeedbackModal.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { Button, Dropdown, FormGroup, Modal } from '../../_shared';
 import './FeedbackModal.css';
+import { MessageSquareText } from 'lucide-react';
 
 type FeedbackCategory = 'bug' | 'feature' | 'ui' | 'performance' | 'other';
 
@@ -34,8 +35,6 @@ interface FeedbackModalProps {
   onSubmitted: (result: { success: boolean; message: string }) => void;
 }
 
-const MAX_SCREENSHOT_BYTES = 5 * 1024 * 1024;
-
 const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context, onSubmitted }) => {
   const [email, setEmail] = useState('');
   const [category, setCategory] = useState<FeedbackCategory>('feature');
@@ -43,8 +42,6 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
   const [messageHtml, setMessageHtml] = useState('');
   const [messageText, setMessageText] = useState('');
   const [includeDiagnostics, setIncludeDiagnostics] = useState(true);
-  const [screenshot, setScreenshot] = useState<FeedbackPayload['screenshot']>();
-  const [screenshotError, setScreenshotError] = useState<string | null>(null);
   const [fieldError, setFieldError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const editorRef = useRef<HTMLDivElement | null>(null);
@@ -80,8 +77,6 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
       editorRef.current.innerHTML = '';
     }
     setIncludeDiagnostics(true);
-    setScreenshot(undefined);
-    setScreenshotError(null);
     setFieldError(null);
     setIsSubmitting(false);
   };
@@ -91,40 +86,6 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
     onClose();
   };
 
-  const handleScreenshotChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) {
-      setScreenshot(undefined);
-      setScreenshotError(null);
-      return;
-    }
-
-    if (file.size > MAX_SCREENSHOT_BYTES) {
-      setScreenshot(undefined);
-      setScreenshotError('Screenshot is too large. Maximum size is 5MB.');
-      return;
-    }
-
-    try {
-      const dataUrl = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result as string);
-        reader.onerror = () => reject(new Error('Could not read screenshot file.'));
-        reader.readAsDataURL(file);
-      });
-
-      setScreenshot({
-        fileName: file.name,
-        mimeType: file.type || 'image/png',
-        dataUrl,
-      });
-      setScreenshotError(null);
-    } catch {
-      setScreenshot(undefined);
-      setScreenshotError('Could not read screenshot file. Please try a different image.');
-    }
-  };
-
   const buildDiagnostics = (): Record<string, unknown> => ({
     timestamp: new Date().toISOString(),
     appVersion: context.appVersion,
@@ -160,7 +121,6 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
       messageText: trimmedMessageText,
       includeDiagnostics,
       diagnostics: includeDiagnostics ? buildDiagnostics() : undefined,
-      screenshot,
     };
 
     setFieldError(null);
@@ -187,6 +147,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
       isOpen={isOpen}
       onClose={handleClose}
       header="Share Feedback"
+      headerIcon={<MessageSquareText className="ui-icon" aria-hidden="true" />}
       footer={
         <>
           <Button variant="secondary" onClick={handleClose}>
@@ -253,7 +214,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
           </div>
         </FormGroup>
 
-        <div className="feedback-row">
+        {/* <div className="feedback-row">
           <label className="feedback-checkbox">
             <input
               type="checkbox"
@@ -262,13 +223,13 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, context,
             />
             Include environment diagnostics (tab, plan metadata, browser info)
           </label>
-        </div>
+        </div> */}
 
-        <FormGroup label="Screenshot (optional)">
+        {/* <FormGroup label="Screenshot (optional)">
           <input type="file" accept="image/*" onChange={handleScreenshotChange} />
           {screenshot && <small className="helper-text">Attached: {screenshot.fileName}</small>}
           {screenshotError && <small className="error">{screenshotError}</small>}
-        </FormGroup>
+        </FormGroup> */}
 
         {fieldError && <p className="feedback-error">{fieldError}</p>}
       </div>
diff --git a/src/components/modals/GlossaryModal/GlossaryModal.tsx b/src/components/modals/GlossaryModal/GlossaryModal.tsx
index 510e58d..150a311 100644
--- a/src/components/modals/GlossaryModal/GlossaryModal.tsx
+++ b/src/components/modals/GlossaryModal/GlossaryModal.tsx
@@ -6,6 +6,7 @@ import {
   type GlossaryCategory,
 } from '../../../data/glossary';
 import './GlossaryModal.css';
+import { BookOpen } from 'lucide-react';
 
 interface GlossaryModalProps {
   isOpen: boolean;
@@ -76,6 +77,7 @@ const GlossaryModal: React.FC<GlossaryModalProps> = ({ isOpen, onClose, initialT
       isOpen={isOpen}
       onClose={onClose}
       header="Glossary of Terms"
+      headerIcon={<BookOpen className="ui-icon" aria-hidden="true" />}
       contentClassName="glossary-modal"
       footer={
         <div className="glossary-footer-actions">
diff --git a/src/components/modals/PaySettingsModal/PaySettingsModal.css b/src/components/modals/PaySettingsModal/PaySettingsModal.css
index db27646..b28297f 100644
--- a/src/components/modals/PaySettingsModal/PaySettingsModal.css
+++ b/src/components/modals/PaySettingsModal/PaySettingsModal.css
@@ -1,4 +1,4 @@
-/* Pay Settings Modal Styles */
+/* Pay Details Modal Styles */
 
 .pay-settings-modal-content {
   max-width: 600px;
diff --git a/src/components/modals/PaySettingsModal/PaySettingsModal.tsx b/src/components/modals/PaySettingsModal/PaySettingsModal.tsx
index a4799f5..19cc212 100644
--- a/src/components/modals/PaySettingsModal/PaySettingsModal.tsx
+++ b/src/components/modals/PaySettingsModal/PaySettingsModal.tsx
@@ -3,19 +3,18 @@ import { useBudget } from '../../../contexts/BudgetContext';
 import { useAppDialogs } from '../../../hooks';
 import type { BudgetData } from '../../../types/budget';
 import type { PayFrequency } from '../../../types/frequencies';
-import type { SelectableViewMode } from '../../../types/viewMode';
 import type { PaySettings } from '../../../types/payroll';
 import type { AuditHistoryTarget } from '../../../types/audit';
 import { convertBudgetAmounts } from '../../../services/budgetCurrencyConversion';
 import { CURRENCIES, getCurrencySymbol } from '../../../utils/currency';
 import { getDisplayModeLabel, getPaychecksPerYear, getPayFrequencyViewMode } from '../../../utils/payPeriod';
 import { normalizeStoredAllocationAmount } from '../../../utils/allocationEditor';
-import { sanitizeFavoriteViewModes, syncFavoritesForCadence } from '../../../utils/viewModePreferences';
 import { APP_CUSTOM_EVENTS } from '../../../constants/events';
 import { formatSuggestedLeftover, getSuggestedLeftoverPerPaycheck } from '../../../utils/paySuggestions';
-import { Modal, Button, ErrorDialog, Dropdown, FormGroup, InputWithPrefix, FormattedNumberInput, RadioGroup } from '../../_shared';
+import { Modal, Button, ErrorDialog, Dropdown, FormGroup, InputWithPrefix, FormattedNumberInput, RadioGroup, InfoBox } from '../../_shared';
 import '../../_shared/payEditorShared.css';
 import './PaySettingsModal.css';
+import { Banknote } from 'lucide-react';
 
 interface PaySettingsModalProps {
   isOpen: boolean;
@@ -251,18 +250,13 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
       };
     }
 
-    // Sync view mode selector favorites when pay frequency changes so the new
-    // cadence tab appears at its canonical position in this plan's selector.
     if (editPayFrequency !== budgetData.paySettings.payFrequency) {
-      const cadenceMode = getPayFrequencyViewMode(editPayFrequency) as SelectableViewMode;
-      const existingFavorites = sanitizeFavoriteViewModes(updatedBudget.settings.viewModeFavorites);
-      const newFavorites = syncFavoritesForCadence(existingFavorites, cadenceMode);
+      const cadenceMode = getPayFrequencyViewMode(editPayFrequency);
       updatedBudget = {
         ...updatedBudget,
         settings: {
           ...updatedBudget.settings,
           displayMode: cadenceMode,
-          viewModeFavorites: newFavorites ?? existingFavorites,
         },
       };
 
@@ -286,13 +280,14 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
       isOpen={isOpen}
       onClose={onClose}
       contentClassName="pay-settings-modal-content"
-      header="Edit Pay Breakdown Settings"
+      header="Your Pay Details"
+      headerIcon={ <Banknote className="ui-icon" aria-hidden="true" /> }
       footer={
         <>
           {onViewHistory && (
             <Button 
-              variant="utility" 
-              onClick={() => onViewHistory({ entityType: 'pay-settings', entityId: 'pay-settings', title: 'Pay Settings' })}
+              variant="secondary" 
+              onClick={() => onViewHistory({ entityType: 'pay-settings', entityId: 'pay-settings', title: 'Pay Details' })}
             >
               View History
             </Button>
@@ -325,7 +320,7 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
           <Dropdown value={editCurrency} onChange={(e) => setEditCurrency(e.target.value)}>
             {CURRENCIES.map((currency) => (
               <option key={currency.code} value={currency.code}>
-                {currency.symbol} - {currency.name} ({currency.code})
+                {currency.name} ({currency.symbol})
               </option>
             ))}
           </Dropdown>
@@ -361,7 +356,6 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
                     setFieldErrors((prev) => ({ ...prev, annualSalary: undefined }));
                   }
                 }}
-                placeholder="65000"
               />
             </FormGroup>
           </div>
@@ -437,6 +431,9 @@ const PaySettingsModal: React.FC<PaySettingsModalProps> = ({ isOpen, onClose, se
               ]}
             />
           </FormGroup>
+          <InfoBox>
+            Your chosen pay frequency will be indicated by a dot next to the corresponding pay frequency label in the view mode selector for your plan.
+          </InfoBox>
         </div>
 
         {/* Paycheck scheduling inputs intentionally disabled for now.
diff --git a/src/components/modals/SettingsModal/SettingsModal.css b/src/components/modals/SettingsModal/SettingsModal.css
index 6a70d3a..05c3673 100644
--- a/src/components/modals/SettingsModal/SettingsModal.css
+++ b/src/components/modals/SettingsModal/SettingsModal.css
@@ -154,7 +154,7 @@
 
 .settings-preset-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.85rem;
 }
 
@@ -338,7 +338,7 @@
   }
 
   .settings-preset-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
   }
 
   .shared-checkbox-group.settings-view-mode-grid {
@@ -346,10 +346,20 @@
   }
 }
 
+@media (max-width: 768px) {
+  .settings-preset-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 @media (max-width: 640px) {
   .shared-checkbox-group.settings-view-mode-grid {
     grid-template-columns: 1fr;
   }
+
+  .settings-preset-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .settings-danger-zone {
diff --git a/src/components/modals/SettingsModal/SettingsModal.tsx b/src/components/modals/SettingsModal/SettingsModal.tsx
index 8d44884..db006ab 100644
--- a/src/components/modals/SettingsModal/SettingsModal.tsx
+++ b/src/components/modals/SettingsModal/SettingsModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Check, Monitor, Moon, Sun } from 'lucide-react';
+import { Check, Monitor, Moon, Settings, Sun } from 'lucide-react';
 import { APPEARANCE_PRESET_MAP, APPEARANCE_PRESET_OPTIONS } from '../../../constants/appearancePresets';
 import { APP_CUSTOM_EVENTS } from '../../../constants/events';
 import { useAppDialogs } from '../../../hooks';
@@ -382,6 +382,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, initialS
       onClose={onClose}
       contentClassName="settings-modal-content"
       header="App Settings"
+      headerIcon={<Settings className="ui-icon" aria-hidden="true" />}
       footer={
         <Button variant="primary" onClick={onClose}>
           Done
diff --git a/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.css b/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.css
deleted file mode 100644
index 3862671..0000000
--- a/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.modal-content.view-mode-settings-modal-content {
-  max-width: min(480px, 96vw);
-}
-
-.view-mode-settings-modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 0.25rem 0;
-}
diff --git a/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.tsx b/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.tsx
deleted file mode 100644
index 2faf476..0000000
--- a/src/components/modals/ViewModeSettingsModal/ViewModeSettingsModal.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import type { SelectableViewMode } from '../../../types/viewMode';
-import { CheckboxGroup, InfoBox, Modal } from '../../_shared';
-import { MAX_VISIBLE_FAVORITE_VIEW_MODES, SELECTABLE_VIEW_MODES, sanitizeFavoriteViewModes } from '../../../utils/viewModePreferences';
-import './ViewModeSettingsModal.css';
-
-const VIEW_MODE_OPTIONS = SELECTABLE_VIEW_MODES.map((mode) => {
-  let label = mode.charAt(0).toUpperCase() + mode.slice(1);
-  if (mode === 'bi-weekly') label = 'Bi-weekly';
-  if (mode === 'semi-monthly') label = 'Semi-monthly';
-  return { value: mode, label };
-});
-
-interface ViewModeSettingsModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  favorites: SelectableViewMode[];
-  onChange: (favorites: SelectableViewMode[]) => void;
-}
-
-const ViewModeSettingsModal: React.FC<ViewModeSettingsModalProps> = ({
-  isOpen,
-  onClose,
-  favorites,
-  onChange,
-}) => {
-  const handleChange = (values: string[]) => {
-    const next = sanitizeFavoriteViewModes(values).slice(0, MAX_VISIBLE_FAVORITE_VIEW_MODES) as SelectableViewMode[];
-    onChange(next);
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      contentClassName="view-mode-settings-modal-content"
-      header="View Mode Favorites"
-    >
-      <div className="view-mode-settings-modal-body">
-        <div className="settings-group">
-          <label>Always Show These View Modes</label>
-          <CheckboxGroup
-            selectedValues={favorites}
-            onChange={handleChange}
-            className="settings-view-mode-grid"
-            options={VIEW_MODE_OPTIONS.map((option) => ({
-              value: option.value,
-              label: option.label,
-              disabled:
-                (favorites.length === 1 && favorites.includes(option.value)) ||
-                (favorites.length >= MAX_VISIBLE_FAVORITE_VIEW_MODES && !favorites.includes(option.value)),
-            }))}
-          />
-        </div>
-
-        <InfoBox>
-          Applies to this plan only. Pin up to {MAX_VISIBLE_FAVORITE_VIEW_MODES} view modes; at least one must stay enabled.
-        </InfoBox>
-      </div>
-    </Modal>
-  );
-};
-
-export default ViewModeSettingsModal;
diff --git a/src/components/modals/ViewModeSettingsModal/index.ts b/src/components/modals/ViewModeSettingsModal/index.ts
deleted file mode 100644
index 4df815c..0000000
--- a/src/components/modals/ViewModeSettingsModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ViewModeSettingsModal';
diff --git a/src/components/tabViews/BillsManager/BillsManager.css b/src/components/tabViews/BillsManager/BillsManager.css
index 69c6a62..218f568 100644
--- a/src/components/tabViews/BillsManager/BillsManager.css
+++ b/src/components/tabViews/BillsManager/BillsManager.css
@@ -46,11 +46,6 @@
   flex-wrap: wrap;
 }
 
-.bills-manager .bills-header-actions .view-mode-selector-wrap {
-  flex: 1 1 34rem;
-  min-width: min(100%, 28rem);
-}
-
 .bills-manager .bills-manager-header {
   display: flex;
   align-items: center;
@@ -64,10 +59,38 @@
   flex-wrap: wrap;
 }
 
+.bills-manager .bills-add-expense-trigger {
+  min-width: 11.5rem;
+}
+
+.bills-manager .bills-add-expense-menu {
+  min-width: 11.5rem;
+}
+
+.bills-manager .bills-add-expense-option {
+  width: 100%;
+}
+
 .bills-manager .bills-header-buttons .btn {
   white-space: nowrap;
 }
 
+@media (max-width: 980px) {
+  .bills-manager .bills-add-expense {
+    width: 100%;
+  }
+
+  .bills-manager .bills-add-expense-trigger {
+    width: 100%;
+  }
+
+  .bills-manager .bills-add-expense-menu {
+    left: 0;
+    right: 0;
+    min-width: 0;
+  }
+}
+
 @media (max-width: 768px) {
   .bills-manager .form-row {
     grid-template-columns: 1fr;
@@ -78,11 +101,6 @@
     align-items: stretch;
   }
 
-  .bills-manager .bills-header-actions .view-mode-selector-wrap {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
   .bills-manager .bills-header-buttons {
     margin-left: 0;
     width: 100%;
diff --git a/src/components/tabViews/BillsManager/BillsManager.tsx b/src/components/tabViews/BillsManager/BillsManager.tsx
index 231f8fc..281ddb8 100644
--- a/src/components/tabViews/BillsManager/BillsManager.tsx
+++ b/src/components/tabViews/BillsManager/BillsManager.tsx
@@ -14,7 +14,7 @@ import { getDefaultAccountIcon, getIconComponent } from '../../../utils/accountD
 import { buildAccountRows, groupByAccountId } from '../../../utils/accountGrouping';
 import { convertBillToMonthly, formatBillFrequency } from '../../../utils/billFrequency';
 import { monthlyToDisplayAmount } from '../../../utils/displayAmounts';
-import { Banner, Button, ConfirmDialog, Dropdown, FormGroup, InputWithPrefix, Modal, PageHeader, PillBadge, PillToggle, RadioGroup, SectionItemCard } from '../../_shared';
+import { ActionMenuButton, Banner, Button, ConfirmDialog, Dropdown, FormGroup, InputWithPrefix, Modal, PageHeader, PillBadge, PillToggle, RadioGroup, SectionItemCard } from '../../_shared';
 import { GlossaryTerm } from '../../modals/GlossaryModal';
 import '../tabViews.shared.css';
 import './BillsManager.css';
@@ -33,6 +33,7 @@ interface BillsManagerProps {
     | 'toggle-benefit';
   searchActionTargetId?: string;
   displayMode: ViewMode;
+  viewModeControl?: React.ReactNode;
   onViewHistory?: (target: AuditHistoryTarget) => void;
 }
 
@@ -91,6 +92,7 @@ const BillsManager: React.FC<BillsManagerProps> = ({
   searchActionType,
   searchActionTargetId,
   displayMode,
+  viewModeControl,
   onViewHistory,
 }) => {
   const { budgetData, addBill, updateBill, deleteBill, addBenefit, updateBenefit, deleteBenefit } = useBudget();
@@ -115,6 +117,25 @@ const BillsManager: React.FC<BillsManagerProps> = ({
   const [benefitIsDiscretionary, setBenefitIsDiscretionary] = useState(false);
   const benefitErrors = useFieldErrors<BenefitFieldErrors>();
   const lastHandledSearchActionKeyRef = useRef(0);
+  const [useCompactHeaderActions, setUseCompactHeaderActions] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(max-width: 980px)').matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia('(max-width: 980px)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setUseCompactHeaderActions(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
 
   useEffect(() => {
     if (scrollToAccountId) {
@@ -511,14 +532,43 @@ const BillsManager: React.FC<BillsManagerProps> = ({
         icon={<ClipboardList className="ui-icon" aria-hidden="true" />}
         actions={
           <div className="bills-header-buttons">
-            <Button variant="secondary" onClick={handleAddBenefit}>
-              <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
-              Add Deduction
-            </Button>
-            <Button variant="primary" onClick={handleAddBill}>
-              <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
-              Add Bill
-            </Button>
+            {viewModeControl}
+            {useCompactHeaderActions ? (
+              <ActionMenuButton
+                className="bills-add-expense"
+                triggerClassName="bills-add-expense-trigger"
+                menuClassName="bills-add-expense-menu"
+                optionClassName="bills-add-expense-option"
+                variant="primary"
+                leadingIcon={<Plus className="ui-icon ui-icon-sm" aria-hidden="true" />}
+                label="Add Expense"
+                items={[
+                  {
+                    id: 'add-bill',
+                    label: 'Add Bill',
+                    icon: <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />,
+                    onSelect: handleAddBill,
+                  },
+                  {
+                    id: 'add-deduction',
+                    label: 'Add Deduction',
+                    icon: <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />,
+                    onSelect: handleAddBenefit,
+                  },
+                ]}
+              />
+            ) : (
+              <>
+                <Button variant="secondary" onClick={handleAddBenefit}>
+                  <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
+                  Add Deduction
+                </Button>
+                <Button variant="primary" onClick={handleAddBill}>
+                  <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
+                  Add Bill
+                </Button>
+              </>
+            )}
           </div>
         }
       />
@@ -529,7 +579,7 @@ const BillsManager: React.FC<BillsManagerProps> = ({
       />
 
       {budgetData.accounts.length === 0 ? (
-        <div className="empty-state">
+        <div className="empty-state empty-state--dashed">
           <div className="empty-icon" aria-hidden="true">
             <Building2 className="ui-icon" />
           </div>
@@ -537,15 +587,21 @@ const BillsManager: React.FC<BillsManagerProps> = ({
           <p>Accounts are created during the initial setup wizard. Run the setup wizard to create your first account.</p>
         </div>
       ) : !hasAnyItems ? (
-        <div className="empty-state">
+        <div className="empty-state empty-state--dashed">
           <div className="empty-icon" aria-hidden="true">
             <ClipboardList className="ui-icon" />
           </div>
-          <h3>No Bills or Deductions Yet</h3>
+          <h3>No Bills or Deductions Added Yet</h3>
           <p>Add recurring bills or paycheck/account deductions to get started</p>
           <div className="empty-state-actions">
-            <Button variant="secondary" onClick={handleAddBenefit}>Add Deduction</Button>
-            <Button variant="primary" onClick={handleAddBill}>Add First Bill</Button>
+            <Button variant="secondary" onClick={handleAddBenefit}>
+              <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
+              Add First Deduction
+            </Button>
+            <Button variant="primary" onClick={handleAddBill}>
+              <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
+              Add First Bill
+            </Button>
           </div>
         </div>
       ) : (
@@ -773,12 +829,12 @@ const BillsManager: React.FC<BillsManagerProps> = ({
           </Dropdown>
         </FormGroup>
 
-        <FormGroup label={<><GlossaryTerm termId="discretionary">Reallocation Eligibility</GlossaryTerm></>}>
+        <FormGroup label={<>Is this a <GlossaryTerm termId="discretionary">discretionary expense</GlossaryTerm>?</>}>
           <PillToggle
             value={billIsDiscretionary}
             onChange={setBillIsDiscretionary}
-            leftLabel="Exclude"
-            rightLabel="Include"
+            leftLabel="No"
+            rightLabel="Yes"
           />
         </FormGroup>
 
@@ -894,12 +950,12 @@ const BillsManager: React.FC<BillsManagerProps> = ({
           </p>
         )}
 
-        <FormGroup label={<><GlossaryTerm termId="discretionary">Reallocation Eligibility</GlossaryTerm></>}>
+        <FormGroup label={<>Is this a <GlossaryTerm termId="discretionary">discretionary expense</GlossaryTerm>?</>}>
           <PillToggle
             value={benefitIsDiscretionary}
             onChange={setBenefitIsDiscretionary}
-            leftLabel="Exclude"
-            rightLabel="Include"
+            leftLabel="No"
+            rightLabel="Yes"
           />
         </FormGroup>
       </Modal>
diff --git a/src/components/tabViews/KeyMetrics/KeyMetrics.tsx b/src/components/tabViews/KeyMetrics/KeyMetrics.tsx
index c7a8248..546aa0d 100644
--- a/src/components/tabViews/KeyMetrics/KeyMetrics.tsx
+++ b/src/components/tabViews/KeyMetrics/KeyMetrics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BanknoteArrowDown, ClipboardList, HandCoins, LayoutGrid, PiggyBank, Scale, Wallet } from 'lucide-react';
+import { Banknote, BanknoteArrowDown, ClipboardList, HandCoins, LayoutGrid, PiggyBank, Scale, Wallet } from 'lucide-react';
 import { useBudget } from '../../../contexts/BudgetContext';
 import { calculateAnnualizedPayBreakdown, calculateAnnualizedPaySummary } from '../../../services/budgetCalculations';
 import { formatWithSymbol } from '../../../utils/currency';
@@ -9,12 +9,13 @@ import { convertBillToYearly } from '../../../utils/billFrequency';
 import { getBillFrequencyOccurrencesPerYear, getSavingsFrequencyOccurrencesPerYear } from '../../../utils/frequency';
 import { buildKeyMetricsSegments } from '../../../utils/keyMetricsSegments';
 import type { KeyMetricsBreakdownView } from '../../../types/settings';
-import { PageHeader, ViewModeSelector } from '../../_shared';
+import { Button, PageHeader, ViewModeSelector } from '../../_shared';
 import { GlossaryTerm } from '../../modals/GlossaryModal';
 import '../tabViews.shared.css';
 import './KeyMetrics.css';
 
 interface KeyMetricsProps {
+  onOpenPayDetails?: () => void;
   onNavigateToTaxes?: () => void;
   onNavigateToNetPay?: () => void;
   onNavigateToSavings?: () => void;
@@ -174,6 +175,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
 };
 
 const KeyMetrics: React.FC<KeyMetricsProps> = ({
+  onOpenPayDetails,
   onNavigateToTaxes,
   onNavigateToNetPay,
   onNavigateToSavings,
@@ -386,9 +388,17 @@ const KeyMetrics: React.FC<KeyMetricsProps> = ({
   return (
     <div className="tab-view key-metrics">
       <PageHeader
-        title="Key Metrics"
+        title="Yearly Metrics"
         subtitle="Your financial overview for the year at a glance"
         icon={<LayoutGrid className="ui-icon" aria-hidden="true" />}
+        actions={
+          onOpenPayDetails ? (
+            <Button variant="secondary" onClick={onOpenPayDetails}>
+              <Banknote className="ui-icon" aria-hidden="true" />
+              Pay Details
+            </Button>
+          ) : undefined
+        }
       />
       <div className="key-metrics-body">
         <div className="metrics-grid">
diff --git a/src/components/tabViews/LoansManager/LoansManager.tsx b/src/components/tabViews/LoansManager/LoansManager.tsx
index 865059d..293e688 100644
--- a/src/components/tabViews/LoansManager/LoansManager.tsx
+++ b/src/components/tabViews/LoansManager/LoansManager.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Banknote, Building2, Landmark, Plus, X } from 'lucide-react';
+import { Building2, Landmark, Plus, X } from 'lucide-react';
 import { useBudget } from '../../../contexts/BudgetContext';
 import { useAppDialogs, useFieldErrors, useModalEntityEditor } from '../../../hooks';
 import type { AuditHistoryTarget } from '../../../types/audit';
@@ -22,6 +22,7 @@ interface LoansManagerProps {
     searchActionType?: 'add-loan' | 'edit-loan' | 'delete-loan' | 'toggle-loan';
     searchActionTargetId?: string;
     displayMode: ViewMode;
+    viewModeControl?: React.ReactNode;
     onViewHistory?: (target: AuditHistoryTarget) => void;
 }
 
@@ -113,6 +114,7 @@ const LoansManager: React.FC<LoansManagerProps> = ({
     searchActionType,
     searchActionTargetId,
     displayMode,
+    viewModeControl,
     onViewHistory,
 }) => {
     const { budgetData, addLoan, updateLoan, deleteLoan } = useBudget();
@@ -475,9 +477,10 @@ const LoansManager: React.FC<LoansManagerProps> = ({
                 icon={<Landmark className="ui-icon" aria-hidden="true" />}
                 actions={
                     <>
+                        {viewModeControl}
                         <Button variant="primary" onClick={handleAddLoan}>
                             <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
-                            Add Loan
+                            Add Loan Payment
                         </Button>
                     </>
                 }
@@ -490,7 +493,7 @@ const LoansManager: React.FC<LoansManagerProps> = ({
 
             <div className="loans-content">
                 {budgetData.accounts.length === 0 ? (
-                    <div className="empty-state empty-state--dashed empty-state--compact">
+                    <div className="empty-state empty-state--dashed">
                         <div className="empty-icon" aria-hidden="true">
                             <Building2 className="ui-icon" />
                         </div>
@@ -498,13 +501,14 @@ const LoansManager: React.FC<LoansManagerProps> = ({
                         <p>Accounts are created during setup. Add an account before assigning loan payments.</p>
                     </div>
                 ) : loansList.length === 0 ? (
-                    <div className="empty-state empty-state--dashed empty-state--compact">
+                    <div className="empty-state empty-state--dashed">
                         <div className="empty-icon" aria-hidden="true">
-                            <Banknote className="ui-icon" />
+                            <Landmark className="ui-icon" />
                         </div>
-                        <h3>No Loan Payments Yet</h3>
+                        <h3>No Loan Payments Added Yet</h3>
                         <p>Add your first recurring loan payment to track it across the app.</p>
-                        <Button variant="primary" className="btn-large" onClick={handleAddLoan} style={{ marginTop: '1rem' }}>
+                        <Button variant="primary" onClick={handleAddLoan}>
+                            <Plus className="ui-icon ui-icon-sm" aria-hidden="true" />
                             Add First Loan Payment
                         </Button>
                     </div>
diff --git a/src/components/tabViews/PayBreakdown/PayBreakdown.test.tsx b/src/components/tabViews/PayBreakdown/PayBreakdown.test.tsx
index 7a8f152..1791ae5 100644
--- a/src/components/tabViews/PayBreakdown/PayBreakdown.test.tsx
+++ b/src/components/tabViews/PayBreakdown/PayBreakdown.test.tsx
@@ -9,7 +9,6 @@ const {
   openConfirmDialogMock,
   closeConfirmDialogMock,
   confirmCurrentDialogMock,
-  paySettingsModalMock,
   mockBudgetData,
 } = vi.hoisted(() => ({
   updateBudgetDataMock: vi.fn(),
@@ -20,7 +19,6 @@ const {
   openConfirmDialogMock: vi.fn(),
   closeConfirmDialogMock: vi.fn(),
   confirmCurrentDialogMock: vi.fn(),
-  paySettingsModalMock: vi.fn(),
   mockBudgetData: {
     settings: { currency: 'USD' },
     paySettings: {
@@ -96,17 +94,6 @@ vi.mock('../../../services/reallocationPlanner', () => ({
   applyReallocationPlan: vi.fn(),
 }));
 
-vi.mock('../../modals/PaySettingsModal', () => ({
-  default: ({ isOpen, searchFieldHighlight }: { isOpen: boolean; searchFieldHighlight?: string }) => {
-    paySettingsModalMock({ isOpen, searchFieldHighlight });
-    if (!isOpen) {
-      return null;
-    }
-
-    return <div data-testid="pay-settings-modal">{searchFieldHighlight ?? 'none'}</div>;
-  },
-}));
-
 vi.mock('../../modals/ReallocationReviewModal/ReallocationReviewModal', () => ({
   default: () => null,
 }));
@@ -126,7 +113,6 @@ describe('PayBreakdown custom allocation validation', () => {
     openConfirmDialogMock.mockClear();
     closeConfirmDialogMock.mockClear();
     confirmCurrentDialogMock.mockClear();
-    paySettingsModalMock.mockClear();
 
     localStorage.clear();
 
@@ -231,18 +217,4 @@ describe('PayBreakdown custom allocation validation', () => {
     expect(screen.getByText(/allocations exceed net pay/i)).toBeInTheDocument();
   });
 
-  it('opens pay settings modal and passes search field highlight when requested by dashboard search', async () => {
-    render(
-      <PayBreakdown
-        displayMode="monthly"
-        searchPaySettingsRequestKey={1}
-        searchPaySettingsFieldHighlight="payFrequency"
-      />,
-    );
-
-    expect(await screen.findByTestId('pay-settings-modal')).toHaveTextContent('payFrequency');
-    expect(paySettingsModalMock).toHaveBeenCalledWith(
-      expect.objectContaining({ isOpen: true, searchFieldHighlight: 'payFrequency' }),
-    );
-  });
 });
diff --git a/src/components/tabViews/PayBreakdown/PayBreakdown.tsx b/src/components/tabViews/PayBreakdown/PayBreakdown.tsx
index fb52b97..6a306ce 100644
--- a/src/components/tabViews/PayBreakdown/PayBreakdown.tsx
+++ b/src/components/tabViews/PayBreakdown/PayBreakdown.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { Wallet, Info, Plus, Settings, X } from 'lucide-react';
+import React, { useMemo, useState, useRef } from 'react';
+import { Wallet, Info, Plus, X, Banknote } from 'lucide-react';
 import { useBudget } from '../../../contexts/BudgetContext';
 import { useAppDialogs } from '../../../hooks';
 import { calculateAnnualizedPayBreakdown, calculateDisplayPayBreakdown } from '../../../services/budgetCalculations';
@@ -18,7 +18,6 @@ import { toDisplayAmount } from '../../../utils/displayAmounts';
 import { buildPreTaxLineItems, buildPostTaxLineItems } from '../../../utils/deductionLineItems';
 import { applyReallocationPlan, createReallocationPlan, type ReallocationProposal } from '../../../services/reallocationPlanner';
 import { Alert, Button, ConfirmDialog, InputWithPrefix, PageHeader, AmountBreakdown, Toast } from '../../_shared';
-import PaySettingsModal from '../../modals/PaySettingsModal';
 import ReallocationReviewModal from '../../modals/ReallocationReviewModal/ReallocationReviewModal';
 import ReallocationSummaryModal, { type ReallocationSummaryItem } from '../../modals/ReallocationSummaryModal/ReallocationSummaryModal';
 import { GlossaryTerm } from '../../modals/GlossaryModal';
@@ -85,8 +84,8 @@ const getCategoryItemCount = (category: AllocationCategory): number | null => {
 
 interface PayBreakdownProps {
   displayMode: ViewMode;
-  searchPaySettingsRequestKey?: number;
-  searchPaySettingsFieldHighlight?: string;
+  viewModeControl?: React.ReactNode;
+  onOpenPayDetails?: () => void;
   onNavigateToBills?: (accountId: string) => void;
   onNavigateToSavings?: (accountId: string) => void;
   onNavigateToRetirement?: (accountId: string) => void;
@@ -96,8 +95,8 @@ interface PayBreakdownProps {
 
 const PayBreakdown: React.FC<PayBreakdownProps> = ({
   displayMode,
-  searchPaySettingsRequestKey,
-  searchPaySettingsFieldHighlight,
+  viewModeControl,
+  onOpenPayDetails,
   onNavigateToBills,
   onNavigateToSavings,
   onNavigateToRetirement,
@@ -109,8 +108,6 @@ const PayBreakdown: React.FC<PayBreakdownProps> = ({
   const [editingAccountIds, setEditingAccountIds] = useState<Set<string>>(new Set());
   const [draftAccounts, setDraftAccounts] = useState<Map<string, AllocationAccount>>(new Map());
   const [validationMessages, setValidationMessages] = useState<Map<string, ValidationMessage>>(new Map());
-  const [showPaySettingsModal, setShowPaySettingsModal] = useState(false);
-  const [paySettingsFieldHighlight, setPaySettingsFieldHighlight] = useState<string | undefined>(undefined);
   const [inputValues, setInputValues] = useState<Map<string, number>>(new Map()); // Local input values to prevent conversion flicker
   const [showReallocationModal, setShowReallocationModal] = useState(false);
   const [selectedReallocationIds, setSelectedReallocationIds] = useState<string[]>([]);
@@ -129,15 +126,6 @@ const PayBreakdown: React.FC<PayBreakdownProps> = ({
   const negativeBalancePromptedRef = useRef(false);
   const suppressNextNegativeBalancePromptRef = useRef(false);
 
-  useEffect(() => {
-    if (!searchPaySettingsRequestKey) {
-      return;
-    }
-
-    setPaySettingsFieldHighlight(searchPaySettingsFieldHighlight);
-    setShowPaySettingsModal(true);
-  }, [searchPaySettingsFieldHighlight, searchPaySettingsRequestKey]);
-
   if (!budgetData) return null;
 
   const currency = budgetData.settings?.currency || 'USD';
@@ -730,24 +718,17 @@ const PayBreakdown: React.FC<PayBreakdownProps> = ({
         icon={<Wallet className="ui-icon" aria-hidden="true" />}
         actions={
           <>
-            <Button variant="secondary" onClick={() => setShowPaySettingsModal(true)}>
-              <Settings className="ui-icon ui-icon-sm" aria-hidden="true" />
-              Pay Settings
-            </Button>
+            {viewModeControl}
+            {onOpenPayDetails && (
+              <Button variant="secondary" onClick={onOpenPayDetails}>
+                <Banknote className="ui-icon" aria-hidden="true" />
+                Pay Details
+              </Button>
+            )}
           </>
         }
       />
 
-      <PaySettingsModal
-        isOpen={showPaySettingsModal}
-        onClose={() => {
-          setShowPaySettingsModal(false);
-          setPaySettingsFieldHighlight(undefined);
-        }}
-        searchFieldHighlight={paySettingsFieldHighlight}
-        onViewHistory={onViewHistory}
-      />
-
       {/* Gross to Net Table */}
       <div className="flow-breakdown">
         <div className="flow-breakdown-header">
@@ -852,7 +833,7 @@ const PayBreakdown: React.FC<PayBreakdownProps> = ({
       {budgetData.accounts.length > 0 && (
         <div id="pay-breakdown-after-tax-allocations" className="waterfall-breakdown">
           <div className="waterfall-header">
-            <h3>After-Tax <GlossaryTerm termId="allocation">Allocations</GlossaryTerm></h3>
+            <h3>Take Home Pay <GlossaryTerm termId="allocation">Allocations</GlossaryTerm></h3>
           </div>
           
           <div className="waterfall-table">
@@ -879,7 +860,7 @@ const PayBreakdown: React.FC<PayBreakdownProps> = ({
                           return IconComponent ? <IconComponent className="ui-icon ui-icon-sm" /> : iconName;
                         })()
                       }</span>
-                      Amount from {fundingItem.account.name}
+                      Amount to {fundingItem.account.name}
                     </span>
                     <div className="waterfall-account-row-right">
                       {!isEditing ? (
diff --git a/src/components/tabViews/SavingsManager/SavingsManager.tsx b/src/components/tabViews/SavingsManager/SavingsManager.tsx
index 4b0ce03..01dab54 100644
--- a/src/components/tabViews/SavingsManager/SavingsManager.tsx
+++ b/src/components/tabViews/SavingsManager/SavingsManager.tsx
@@ -34,6 +34,7 @@ interface SavingsManagerProps {
     | 'toggle-retirement';
   searchActionTargetId?: string;
   displayMode?: ViewMode;
+  viewModeControl?: React.ReactNode;
   onViewHistory?: (target: AuditHistoryTarget) => void;
 }
 
@@ -57,6 +58,7 @@ const SavingsManager: React.FC<SavingsManagerProps> = ({
   searchActionType,
   searchActionTargetId,
   displayMode = 'paycheck',
+  viewModeControl,
   onViewHistory,
 }) => {
   const { confirmDialog, openConfirmDialog, closeConfirmDialog, confirmCurrentDialog } = useAppDialogs();
@@ -570,9 +572,10 @@ const SavingsManager: React.FC<SavingsManagerProps> = ({
   return (
     <div className="tab-view savings-manager">
       <PageHeader
-        title="Savings"
+        title="Savings & Retirement Plans"
         subtitle="Manage savings/investment transfers and retirement contributions"
         icon={<PiggyBank className="ui-icon" aria-hidden="true" />}
+        actions={viewModeControl}
       />
 
       <Banner
diff --git a/src/components/tabViews/TaxBreakdown/TaxBreakdown.css b/src/components/tabViews/TaxBreakdown/TaxBreakdown.css
index 43bf6b8..03bc2f4 100644
--- a/src/components/tabViews/TaxBreakdown/TaxBreakdown.css
+++ b/src/components/tabViews/TaxBreakdown/TaxBreakdown.css
@@ -144,6 +144,28 @@
 .tax-settings-modal {
     max-width: 700px;
 }
+.tax-breakdown .tax-breakdown-actions-menu-trigger {
+    min-width: 9rem;
+}
+
+.tax-breakdown .tax-breakdown-actions-menu-popover {
+    min-width: 12rem;
+}
+
+.tax-breakdown .tax-breakdown-actions-menu-option {
+    width: 100%;
+}
+
+@media (max-width: 980px) {
+    .tax-breakdown .tax-breakdown-actions-menu {
+        width: 100%;
+    }
+
+    .tax-breakdown .tax-breakdown-actions-menu-trigger {
+        width: 100%;
+    }
+}
+
 @media (max-width: 768px) {
     .breakdown-header {
         flex-direction: column;
diff --git a/src/components/tabViews/TaxBreakdown/TaxBreakdown.tsx b/src/components/tabViews/TaxBreakdown/TaxBreakdown.tsx
index b688ac1..fdba1eb 100644
--- a/src/components/tabViews/TaxBreakdown/TaxBreakdown.tsx
+++ b/src/components/tabViews/TaxBreakdown/TaxBreakdown.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { History, Pencil, Scale } from 'lucide-react';
 import { useBudget } from '../../../contexts/BudgetContext';
 import { formatWithSymbol, getCurrencySymbol } from '../../../utils/currency';
 import { getPaychecksPerYear, convertToDisplayMode, getDisplayModeLabel } from '../../../utils/payPeriod';
-import { Button, InputWithPrefix, Modal, FormGroup, PageHeader, TaxLinesEditor, InfoBox } from '../../_shared';
+import { ActionMenuButton, Button, InputWithPrefix, Modal, FormGroup, PageHeader, TaxLinesEditor, InfoBox } from '../../_shared';
 import { GlossaryTerm } from '../../modals/GlossaryModal';
 import type { TaxLine } from '../../../types/payroll';
 import type { ViewMode } from '../../../types/viewMode';
@@ -18,20 +19,24 @@ import {
 } from '../../../utils/taxLines';
 import '../tabViews.shared.css';
 import './TaxBreakdown.css';
-import { Scale } from 'lucide-react';
 
 interface TaxBreakdownProps {
     searchOpenSettingsRequestKey?: number;
     displayMode: ViewMode;
+    viewModeControl?: React.ReactNode;
     onViewHistory?: (target: AuditHistoryTarget) => void;
 }
 
-const TaxBreakdown: React.FC<TaxBreakdownProps> = ({ searchOpenSettingsRequestKey, displayMode, onViewHistory }) => {
+const TaxBreakdown: React.FC<TaxBreakdownProps> = ({ searchOpenSettingsRequestKey, displayMode, viewModeControl, onViewHistory }) => {
     const { budgetData, calculatePaycheckBreakdown, updateBudgetData } = useBudget();
     const [showEditModal, setShowEditModal] = useState(false);
     const [editLines, setEditLines] = useState<EditableTaxLineValues[]>([]);
     const [additionalWithholding, setAdditionalWithholding] = useState('0');
     const [additionalWithholdingError, setAdditionalWithholdingError] = useState<string | undefined>();
+    const [useCompactHeaderActions, setUseCompactHeaderActions] = useState<boolean>(() => {
+        if (typeof window === 'undefined') return false;
+        return window.matchMedia('(max-width: 980px)').matches;
+    });
     const lastHandledSearchOpenSettingsRef = useRef(0);
 
     const currency = budgetData?.settings?.currency || 'USD';
@@ -74,6 +79,23 @@ const TaxBreakdown: React.FC<TaxBreakdownProps> = ({ searchOpenSettingsRequestKe
         return () => window.clearTimeout(timeoutId);
     }, [budgetData, searchOpenSettingsRequestKey, taxSettings.additionalWithholding, taxSettings.taxLines, taxableIncomeForEditor]);
 
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        const mediaQuery = window.matchMedia('(max-width: 980px)');
+        const handleChange = (event: MediaQueryListEvent) => {
+            setUseCompactHeaderActions(event.matches);
+        };
+
+        mediaQuery.addEventListener('change', handleChange);
+
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, []);
+
     if (!budgetData) return null;
 
     const formatRateLabel = (line: TaxLine) => {
@@ -194,14 +216,44 @@ const TaxBreakdown: React.FC<TaxBreakdownProps> = ({ searchOpenSettingsRequestKe
                 icon={<Scale className="ui-icon" aria-hidden="true" />}
                 actions={
                     <>
-                        {onViewHistory && (
-                            <Button variant="secondary" onClick={() => onViewHistory({ entityType: 'tax-settings', entityId: 'tax-settings', title: 'Tax Settings' })}>
-                                View History
-                            </Button>
+                        {viewModeControl}
+                        {useCompactHeaderActions ? (
+                            <ActionMenuButton
+                                className="tax-breakdown-actions-menu"
+                                triggerClassName="tax-breakdown-actions-menu-trigger"
+                                menuClassName="tax-breakdown-actions-menu-popover"
+                                optionClassName="tax-breakdown-actions-menu-option"
+                                variant="secondary"
+                                label="Actions"
+                                items={[
+                                    ...(onViewHistory
+                                        ? [{
+                                            id: 'view-history',
+                                            label: 'View History',
+                                            icon: <History className="ui-icon ui-icon-sm" aria-hidden="true" />,
+                                            onSelect: () => onViewHistory({ entityType: 'tax-settings', entityId: 'tax-settings', title: 'Tax Settings' }),
+                                        }]
+                                        : []),
+                                    {
+                                        id: 'edit-tax-settings',
+                                        label: 'Edit Tax Settings',
+                                        icon: <Pencil className="ui-icon ui-icon-sm" aria-hidden="true" />,
+                                        onSelect: handleEditStart,
+                                    },
+                                ]}
+                            />
+                        ) : (
+                            <>
+                                {onViewHistory && (
+                                    <Button variant="secondary" onClick={() => onViewHistory({ entityType: 'tax-settings', entityId: 'tax-settings', title: 'Tax Settings' })}>
+                                        View History
+                                    </Button>
+                                )}
+                                <Button variant="primary" onClick={handleEditStart}>
+                                    Edit Tax Settings
+                                </Button>
+                            </>
                         )}
-                        <Button variant="primary" onClick={handleEditStart}>
-                            Edit Tax Settings
-                        </Button>
                     </>
                 }
             />
diff --git a/src/components/views/SetupWizard/SetupWizard.tsx b/src/components/views/SetupWizard/SetupWizard.tsx
index 36cf39c..85290b8 100644
--- a/src/components/views/SetupWizard/SetupWizard.tsx
+++ b/src/components/views/SetupWizard/SetupWizard.tsx
@@ -398,7 +398,7 @@ const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, onCancel }) => {
                 >
                   {CURRENCIES.map(curr => (
                     <option key={curr.code} value={curr.code}>
-                      {`${curr.symbol} - ${curr.name} (${curr.code})`}
+                      {`${curr.name} (${curr.symbol})`}
                     </option>
                   ))}
                 </Dropdown>
diff --git a/src/constants/appMeta.ts b/src/constants/appMeta.ts
new file mode 100644
index 0000000..fbcb850
--- /dev/null
+++ b/src/constants/appMeta.ts
@@ -0,0 +1,2 @@
+export const APP_NAME = 'Paycheck Planner';
+export const APP_VERSION = __APP_VERSION__;
diff --git a/src/constants/appearancePresets.ts b/src/constants/appearancePresets.ts
index 9ff8145..3df39ae 100644
--- a/src/constants/appearancePresets.ts
+++ b/src/constants/appearancePresets.ts
@@ -18,7 +18,7 @@ export const APPEARANCE_PRESET_OPTIONS: AppearancePresetMeta[] = [
   {
     value: 'default',
     label: 'Paycheck Planner Purple',
-    description: 'Indigo and violet with the existing Paycheck Planner look.',
+    description: 'Indigo and violet with the original Paycheck Planner look.',
     preview: {
       accent: '#667eea',
       accentAlt: '#764ba2',
diff --git a/src/constants/events.ts b/src/constants/events.ts
index 42253dd..4088bf5 100644
--- a/src/constants/events.ts
+++ b/src/constants/events.ts
@@ -4,6 +4,7 @@ export const MENU_EVENTS = {
   openBudgetFile: 'open-budget-file',
   changeEncryption: 'change-encryption',
   savePlan: 'save-plan',
+  copyPlan: 'copy-plan',
   openSettings: 'open-settings',
   openAbout: 'open-about',
   openGlossary: 'open-glossary',
@@ -28,7 +29,6 @@ export const APP_CUSTOM_EVENTS = {
   themeModeChanged: 'theme-mode-changed',
   appearanceSettingsChanged: 'appearance-settings-changed',
   glossaryTermsChanged: 'glossary-terms-changed',
-  viewModeFavoritesChanged: 'view-mode-favorites-changed',
   viewModeAutoSwitched: 'view-mode-auto-switched',
   undoRedoStatus: 'app:undo-redo-status',
 } as const;
diff --git a/src/data/glossary.ts b/src/data/glossary.ts
index 8b0e95c..4476a45 100644
--- a/src/data/glossary.ts
+++ b/src/data/glossary.ts
@@ -162,11 +162,11 @@ export const glossaryTerms: GlossaryTerm[] = [
   },
   {
     id: 'discretionary',
-    term: 'Reallocation Eligibility',
+    term: 'Discretionary Expense',
     category: 'allocations',
-    shortDefinition: 'Items marked to include in automated reallocation when remaining is below target.',
+    shortDefinition: 'Expenses that are optional or flexible.',
     fullDefinition:
-      'Bills and deductions can be marked as eligible for reallocation. When remaining is below target, Paycheck Planner can suggest pausing or reducing eligible items before recommending changes to retirement or other locked obligations.',
+      'Bills and deductions can be marked as discretionary. When your remaining for spending amount is below your target, Paycheck Planner can suggest pausing or reducing discretionary items before recommending changes to savings, retirement, or other obligations.',
     aliases: ['optional spending', 'flexible expense', 'discretionary'],
     relatedTermIds: ['allocation', 'residual-amount', 'deduction'],
   },
diff --git a/src/index.css b/src/index.css
index 91158c7..09bd0ed 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
   --icon-color-default: currentColor;
   --icon-color-muted: var(--text-secondary);
   --icon-color-accent: var(--accent-primary);
-  --icon-stroke-width: 1.3;
+  --icon-stroke-width: 1.5;
   line-height: 1.5;
   font-weight: 400;
 
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 095eeb0..eb6d0fd 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -1,6 +1,5 @@
 import type { TabConfig, TabDisplayMode, TabPosition } from './tabs';
 import type { AppearanceMode, AppearancePreset, ColorVisionMode, CustomAppearanceSettings, StateCueMode, ThemeMode } from './appearance';
-import type { SelectableViewMode } from './viewMode';
 import type { ViewMode } from './viewMode';
 
 export type KeyMetricsBreakdownView = 'flow' | 'stacked' | 'pie';
@@ -24,7 +23,6 @@ export interface BudgetSettings {
   };
   activeTab?: string;
   keyMetricsBreakdownView?: KeyMetricsBreakdownView;
-  viewModeFavorites?: SelectableViewMode[];
 }
 
 export interface AppSettings {
diff --git a/src/utils/demoDataGenerator.test.ts b/src/utils/demoDataGenerator.test.ts
index 1439577..f4b3ae6 100644
--- a/src/utils/demoDataGenerator.test.ts
+++ b/src/utils/demoDataGenerator.test.ts
@@ -29,4 +29,36 @@ describe('demoDataGenerator utilities', () => {
     expect(Number.isNaN(Date.parse(data.createdAt))).toBe(false);
     expect(Number.isNaN(Date.parse(data.updatedAt))).toBe(false);
   });
+
+  it('never generates loan payments that push total fixed expenses above 92% of estimated net', () => {
+    // Run many seeds to catch worst-case over-allocation
+    const seeds = [0, 0.1, 0.25, 0.5, 0.75, 0.9, 0.99];
+    for (const seed of seeds) {
+      vi.spyOn(Math, 'random').mockReturnValue(seed);
+      const data = generateDemoBudgetData(2026);
+
+      const annualBills = data.bills.reduce((sum, b) => sum + b.amount * 12, 0);
+      const annualLoans = data.loans.reduce((sum, l) => sum + (l.monthlyPayment ?? 0) * 12, 0);
+      const totalFixed = annualBills + annualLoans;
+
+      // Derive gross from paySettings the same way the generator does
+      let grossPerYear = 0;
+      if (data.paySettings.payType === 'salary') {
+        grossPerYear = data.paySettings.annualSalary ?? 0;
+      } else {
+        const { hourlyRate = 0, hoursPerPayPeriod = 0, payFrequency } = data.paySettings;
+        const ppy = payFrequency === 'weekly' ? 52 : payFrequency === 'bi-weekly' ? 26 : payFrequency === 'semi-monthly' ? 24 : 12;
+        grossPerYear = hourlyRate * hoursPerPayPeriod * ppy;
+      }
+
+      // After the safety cap, total fixed expenses must be well under gross.
+      // Minimum take-home is ~62% of gross (heavy-tax scenario). The generator
+      // caps at 92% of estimated net → at most ~0.92 * 0.62 * gross ≈ 57% of gross.
+      // Using 80% of gross as a generous sanity bound ensures the test catches
+      // any regression without being fragile to rounding or estimation error.
+      expect(totalFixed).toBeLessThanOrEqual(grossPerYear * 0.8);
+
+      vi.restoreAllMocks();
+    }
+  });
 });
diff --git a/src/utils/demoDataGenerator.ts b/src/utils/demoDataGenerator.ts
index 9e9c53d..ef892d3 100644
--- a/src/utils/demoDataGenerator.ts
+++ b/src/utils/demoDataGenerator.ts
@@ -34,14 +34,17 @@ export function generateDemoBudgetData(year: number, currency: string = 'USD'):
 
     annualGrossPay = hourlyRate * weeklyHours * 52;
   } else {
-    const salaryOptions = [32000, 38000, 45000, 52000, 60000, 70000, 82000, 92000, 98000];
+    const salaryOptions = [32000, 38000, 45000, 52000, 60000, 70000, 82000, 92000, 98000, 110000, 130000, 210000];
+    const variance = randomBetween(0.88, 1.12);
     annualSalary = salaryOptions[Math.floor(Math.random() * salaryOptions.length)];
-    annualGrossPay = annualSalary;
+    annualGrossPay = annualSalary * variance;
   }
 
   let federalTaxRate = 10;
   if (annualGrossPay > 50000) federalTaxRate = 12;
   if (annualGrossPay > 80000) federalTaxRate = 18;
+  if (annualGrossPay > 120000) federalTaxRate = 22;
+  if (annualGrossPay > 200000) federalTaxRate = 28;
   federalTaxRate += Math.random() * 2;
   const stateTaxRate = Math.random() < 0.25 ? 0 : 3 + Math.random() * 4;
 
@@ -49,7 +52,7 @@ export function generateDemoBudgetData(year: number, currency: string = 'USD'):
   const accounts: Account[] = [
     {
       id: checkingId,
-      name: 'My Checking',
+      name: 'Example Bank',
       type: 'checking',
       icon: getDefaultAccountIcon('checking'),
       color: getDefaultAccountColor('checking'),
@@ -130,20 +133,23 @@ export function generateDemoBudgetData(year: number, currency: string = 'USD'):
 
   const monthlyGross = annualGrossPay / 12;
 
-  const housingPercent = randomBetween(0.30, 0.40);
-  const utilitiesPercent = randomBetween(0.05, 0.08);
+  const housingPercent = randomBetween(0.30, 0.45);
+  const utilitiesPercent = randomBetween(0.03, 0.06);
 
   const targetMonthlyBills = [
-    { name: 'Rent', category: 'Housing', basePercent: housingPercent },
-    { name: 'Utilities', category: 'Utilities', basePercent: utilitiesPercent },
-    { name: 'Internet', category: 'Utilities', basePercent: 0.02 },
-    { name: 'Insurance', category: 'Insurance', basePercent: 0.05 },
-    { name: 'Streaming Service', category: 'Entertainment', basePercent: 0.01 },
+    { name: 'Rent', category: 'Housing', basePercent: housingPercent, baseAmount: 0 },
+    { name: 'Utilities', category: 'Utilities', basePercent: utilitiesPercent, baseAmount: 0 },
+    { name: 'Internet', category: 'Utilities', basePercent: 0.02, baseAmount: 0 },
+    { name: 'Insurance', category: 'Insurance', basePercent: 0.05, baseAmount: 0 },
+    { name: 'Streaming Service', category: 'Entertainment', basePercent: 0, baseAmount: 10 },
+    { name: 'Gym', category: 'Health', baseAmount: randomBetween(15, 60), basePercent: 0 },
   ];
 
   const bills: Bill[] = targetMonthlyBills.map((billTemplate) => {
     const variance = randomBetween(0.88, 1.12);
-    const monthlyAmount = roundToCents(monthlyGross * billTemplate.basePercent * variance);
+    const monthlyAmount = billTemplate.basePercent == 0
+      ? roundToCents(billTemplate.baseAmount * variance)
+      : roundToCents(monthlyGross * billTemplate.basePercent * variance);
     return {
       id: crypto.randomUUID(),
       name: billTemplate.name,
@@ -321,6 +327,24 @@ export function generateDemoBudgetData(year: number, currency: string = 'USD'):
     });
   }
 
+  // Safety cap: total bills + loan payments must not exceed 92% of estimated annual net.
+  // Bills are already capped vs net, but loans are derived from gross percentages and can
+  // stack up dramatically when multiple loan types are generated simultaneously.
+  if (loans.length > 0) {
+    const annualBillTotal = bills.reduce((sum, bill) => sum + bill.amount * 12, 0);
+    const annualLoanTotal = loans.reduce((sum, loan) => sum + (loan.monthlyPayment ?? 0) * 12, 0);
+    const maxAnnualTotal = estimatedAnnualNet * 0.92;
+    if (annualBillTotal + annualLoanTotal > maxAnnualTotal) {
+      const maxLoanAnnual = Math.max(0, maxAnnualTotal - annualBillTotal);
+      const loanScale = annualLoanTotal > 0 ? maxLoanAnnual / annualLoanTotal : 1;
+      if (loanScale < 1) {
+        loans.forEach((loan) => {
+          loan.monthlyPayment = roundToCents(Math.max(10, (loan.monthlyPayment ?? 0) * loanScale));
+        });
+      }
+    }
+  }
+
   return {
     id: crypto.randomUUID(),
     name: `${year} Demo Plan`,
diff --git a/src/utils/planSearch.ts b/src/utils/planSearch.ts
index e4cb28c..186f92d 100644
--- a/src/utils/planSearch.ts
+++ b/src/utils/planSearch.ts
@@ -21,7 +21,7 @@ export interface NavigateTabAction {
   elementId?: string;
 }
 
-/** Open the Pay Settings modal and optionally highlight a field. */
+/** Open the Pay Details modal and optionally highlight a field. */
 export interface OpenPaySettingsAction {
   type: 'open-pay-settings';
   fieldHighlight?: string;
diff --git a/src/utils/searchModules/paySettingsSearchModule.test.ts b/src/utils/searchModules/paySettingsSearchModule.test.ts
index 51ba654..9c428f6 100644
--- a/src/utils/searchModules/paySettingsSearchModule.test.ts
+++ b/src/utils/searchModules/paySettingsSearchModule.test.ts
@@ -4,7 +4,7 @@ import { paySettingsSearchModule } from './paySettingsSearchModule';
 
 const salaryBudget: BudgetData = {
   id: 'pay-settings-salary',
-  name: 'Pay Settings Salary',
+  name: 'Pay Details Salary',
   year: 2026,
   paySettings: {
     payType: 'salary',
diff --git a/src/utils/searchModules/paySettingsSearchModule.ts b/src/utils/searchModules/paySettingsSearchModule.ts
index 4112205..b31a601 100644
--- a/src/utils/searchModules/paySettingsSearchModule.ts
+++ b/src/utils/searchModules/paySettingsSearchModule.ts
@@ -29,7 +29,7 @@ function buildPaySettingsResults(budgetData: BudgetData): SearchResult[] {
     id: 'pay-settings-annual-pay',
     title: 'Annual Pay',
     subtitle: getAnnualPaySubtitle(annualAmount, pay.payType, currency),
-    category: 'Pay Settings',
+    category: 'Pay Details',
     categoryIcon: Banknote,
     action: { type: 'open-pay-settings', fieldHighlight: pay.payType === 'salary' ? 'annualSalary' : 'hourlyRate' },
   });
@@ -40,7 +40,7 @@ function buildPaySettingsResults(budgetData: BudgetData): SearchResult[] {
     subtitle: pay.payFrequency
       ? pay.payFrequency.charAt(0).toUpperCase() + pay.payFrequency.slice(1).replace(/-/g, ' ')
       : undefined,
-    category: 'Pay Settings',
+    category: 'Pay Details',
     categoryIcon: CalendarClock,
     action: { type: 'open-pay-settings', fieldHighlight: 'payFrequency' },
   });
@@ -50,7 +50,7 @@ function buildPaySettingsResults(budgetData: BudgetData): SearchResult[] {
       id: 'pay-settings-hourly-rate',
       title: 'Hourly Rate',
       subtitle: formatSearchCurrency(pay.hourlyRate, currency) + '/hr',
-      category: 'Pay Settings',
+      category: 'Pay Details',
       categoryIcon: Clock,
       action: { type: 'open-pay-settings', fieldHighlight: 'hourlyRate' },
     });
diff --git a/src/utils/searchRegistry.ts b/src/utils/searchRegistry.ts
index 2d5f9ac..8e108d3 100644
--- a/src/utils/searchRegistry.ts
+++ b/src/utils/searchRegistry.ts
@@ -88,7 +88,11 @@ const registry = new Map<string, SearchModule>();
  */
 export function registerSearchModule(module: SearchModule): void {
   if (registry.has(module.id)) {
-    console.warn(`Search module '${module.id}' is already registered. Replacing it.`);
+    // React Strict Mode and HMR can re-run app initialization in development.
+    // Replacing the existing module is expected in that case, so keep this quiet.
+    if (!import.meta.env.DEV) {
+      console.warn(`Search module '${module.id}' is already registered. Replacing it.`);
+    }
   }
   registry.set(module.id, module);
 }
diff --git a/src/utils/tabManagement.test.ts b/src/utils/tabManagement.test.ts
index 11f8184..883f996 100644
--- a/src/utils/tabManagement.test.ts
+++ b/src/utils/tabManagement.test.ts
@@ -33,7 +33,7 @@ describe('tabManagement utilities', () => {
     const existing = [
       {
         id: 'metrics',
-        label: 'Key Metrics',
+        label: 'Yearly Metrics',
         icon: ChartPie,
         visible: true,
         order: 10,
diff --git a/src/utils/tabManagement.ts b/src/utils/tabManagement.ts
index 2bb7286..0a45c13 100644
--- a/src/utils/tabManagement.ts
+++ b/src/utils/tabManagement.ts
@@ -21,7 +21,7 @@ export function getDefaultTabConfigs(): TabConfig[] {
   return [
     {
       id: 'metrics',
-      label: 'Key Metrics',
+      label: 'Yearly Metrics',
       icon: LayoutGrid,
       visible: true,
       order: 0,
diff --git a/src/utils/viewModePreferences.test.ts b/src/utils/viewModePreferences.test.ts
deleted file mode 100644
index e2f9a4c..0000000
--- a/src/utils/viewModePreferences.test.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { buildViewModeSelectorOptions, DEFAULT_FAVORITE_VIEW_MODES, sanitizeFavoriteViewModes, syncFavoritesForCadence } from './viewModePreferences';
-
-describe('viewModePreferences utilities', () => {
-  it('falls back to default favorites when favorites are missing or invalid', () => {
-    expect(sanitizeFavoriteViewModes(undefined)).toEqual(DEFAULT_FAVORITE_VIEW_MODES);
-    expect(sanitizeFavoriteViewModes('weekly')).toEqual(DEFAULT_FAVORITE_VIEW_MODES);
-    expect(sanitizeFavoriteViewModes([])).toEqual(DEFAULT_FAVORITE_VIEW_MODES);
-  });
-
-  it('keeps only valid unique favorites in display order', () => {
-    const favorites = sanitizeFavoriteViewModes(['yearly', 'weekly', 'weekly', 'invalid']);
-
-    expect(favorites).toEqual(['weekly', 'yearly']);
-  });
-
-  it('uses only favorited modes for visible selector options', () => {
-    const options = buildViewModeSelectorOptions(['monthly', 'yearly']);
-
-    expect(options.map((option) => option.value)).toEqual(['monthly', 'yearly']);
-  });
-
-  it('caps visible favorites and can add a supplemental default for monthly cadence', () => {
-    const options = buildViewModeSelectorOptions(['monthly', 'yearly'], 'monthly');
-
-    expect(options.map((option) => option.value)).toEqual(['monthly', 'quarterly', 'yearly']);
-  });
-});
-
-describe('syncFavoritesForCadence', () => {
-  it('returns null when the cadence mode is already in favorites', () => {
-    expect(syncFavoritesForCadence(['bi-weekly', 'monthly', 'quarterly'], 'bi-weekly')).toBeNull();
-  });
-
-  it('adds cadence at its canonical position when there is room', () => {
-    // monthly(3) + yearly(5) → room for bi-weekly(1) → [bi-weekly, monthly, yearly]
-    expect(syncFavoritesForCadence(['monthly', 'yearly'], 'bi-weekly')).toEqual(['bi-weekly', 'monthly', 'yearly']);
-  });
-
-  it('drops the first existing favorite to make room when at capacity', () => {
-    // [monthly, quarterly, yearly] at cap → drop monthly, add bi-weekly → [bi-weekly, quarterly, yearly]
-    expect(syncFavoritesForCadence(['monthly', 'quarterly', 'yearly'], 'bi-weekly')).toEqual(['bi-weekly', 'quarterly', 'yearly']);
-  });
-
-  it('inserts cadence in canonical order when dropped item is not at position 0', () => {
-    // [monthly, yearly] at cap=3? No, only 2 — room available, add quarterly
-    expect(syncFavoritesForCadence(['monthly', 'yearly'], 'quarterly')).toEqual(['monthly', 'quarterly', 'yearly']);
-  });
-
-  it('drops first favorite and respects canonical ordering of the new list', () => {
-    // [bi-weekly, monthly, yearly] at cap → drop bi-weekly, add semi-monthly → [semi-monthly, monthly, yearly]
-    expect(syncFavoritesForCadence(['bi-weekly', 'monthly', 'yearly'], 'semi-monthly')).toEqual(['semi-monthly', 'monthly', 'yearly']);
-  });
-});
diff --git a/src/utils/viewModePreferences.ts b/src/utils/viewModePreferences.ts
index 378a7d8..cbd2703 100644
--- a/src/utils/viewModePreferences.ts
+++ b/src/utils/viewModePreferences.ts
@@ -1,5 +1,4 @@
 import type { SelectableViewMode } from '../types/viewMode';
-import { getDisplayModeLabel } from './payPeriod';
 
 export const SELECTABLE_VIEW_MODES: SelectableViewMode[] = [
   'weekly',
@@ -9,85 +8,3 @@ export const SELECTABLE_VIEW_MODES: SelectableViewMode[] = [
   'quarterly',
   'yearly',
 ];
-
-export const MAX_VISIBLE_FAVORITE_VIEW_MODES = 3;
-export const DEFAULT_FAVORITE_VIEW_MODES: SelectableViewMode[] = ['monthly', 'yearly'];
-
-export type ViewModeOption = {
-  value: SelectableViewMode;
-  label: string;
-};
-
-function getSupplementalFavoriteModeForCadence(
-  payCadenceMode?: SelectableViewMode,
-): SelectableViewMode | null {
-  if (payCadenceMode === 'monthly') {
-    return 'quarterly';
-  }
-
-  if (payCadenceMode === 'yearly') {
-    return 'quarterly';
-  }
-
-  return null;
-}
-
-export function sanitizeFavoriteViewModes(modes: unknown): SelectableViewMode[] {
-  if (!Array.isArray(modes)) {
-    return [...DEFAULT_FAVORITE_VIEW_MODES];
-  }
-
-  const unique = new Set<SelectableViewMode>();
-  for (const mode of SELECTABLE_VIEW_MODES) {
-    if (modes.includes(mode)) {
-      unique.add(mode);
-    }
-  }
-
-  return unique.size > 0 ? Array.from(unique) : [...DEFAULT_FAVORITE_VIEW_MODES];
-}
-
-/**
- * When the pay frequency changes, keep the favorites list in sync:
- * - If the new cadence mode is already in favorites, returns null (no update needed).
- * - Otherwise drops the first existing favorite to make room, inserts the new cadence
- *   mode, and returns a canonical-sorted list capped at MAX_VISIBLE_FAVORITE_VIEW_MODES.
- */
-export function syncFavoritesForCadence(
-  currentFavorites: SelectableViewMode[],
-  cadenceMode: SelectableViewMode,
-): SelectableViewMode[] | null {
-  if (currentFavorites.includes(cadenceMode)) {
-    return null;
-  }
-
-  const base =
-    currentFavorites.length >= MAX_VISIBLE_FAVORITE_VIEW_MODES
-      ? currentFavorites.slice(1)
-      : currentFavorites;
-
-  return sanitizeFavoriteViewModes([...base, cadenceMode]).slice(0, MAX_VISIBLE_FAVORITE_VIEW_MODES);
-}
-
-export function buildViewModeSelectorOptions(
-  favorites: unknown,
-  payCadenceMode?: SelectableViewMode,
-  maxFavorites = MAX_VISIBLE_FAVORITE_VIEW_MODES,
-): ViewModeOption[] {
-  const sanitizedFavorites = sanitizeFavoriteViewModes(favorites);
-  const cappedFavorites = sanitizedFavorites.slice(0, Math.max(maxFavorites, 1));
-
-  if ((payCadenceMode === 'monthly' || payCadenceMode === 'yearly') && cappedFavorites.length < maxFavorites) {
-    const supplementalMode = getSupplementalFavoriteModeForCadence(payCadenceMode);
-    if (supplementalMode && !cappedFavorites.includes(supplementalMode)) {
-      cappedFavorites.push(supplementalMode);
-    }
-  }
-
-  return SELECTABLE_VIEW_MODES
-    .filter((mode) => cappedFavorites.includes(mode))
-    .map((mode) => ({
-      value: mode,
-      label: getDisplayModeLabel(mode),
-    }));
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..dbb4c62
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;
diff --git a/version b/version
index 267577d..2b7c5ae 100644
--- a/version
+++ b/version
@@ -1 +1 @@
-0.4.1
+0.4.2
diff --git a/vite.config.ts b/vite.config.ts
index 5e02eca..29df567 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,72 +1,88 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import electron from 'vite-plugin-electron/simple'
 import path from 'path'
+import fs from 'fs'
+
+const packageJson = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'),
+) as { version?: string }
+const appVersion = packageJson.version ?? '0.0.0'
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    electron({
-      main: {
-        entry: 'electron/main.ts',
-        vite: {
-          define: {
-            'process.env.FEEDBACK_FORM_URL': JSON.stringify(process.env.FEEDBACK_FORM_URL ?? ''),
-            'process.env.FEEDBACK_FORM_ENTRY_EMAIL': JSON.stringify(process.env.FEEDBACK_FORM_ENTRY_EMAIL ?? ''),
-            'process.env.FEEDBACK_FORM_ENTRY_CATEGORY': JSON.stringify(process.env.FEEDBACK_FORM_ENTRY_CATEGORY ?? ''),
-            'process.env.FEEDBACK_FORM_ENTRY_SUBJECT': JSON.stringify(process.env.FEEDBACK_FORM_ENTRY_SUBJECT ?? ''),
-            'process.env.FEEDBACK_FORM_ENTRY_DETAILS': JSON.stringify(process.env.FEEDBACK_FORM_ENTRY_DETAILS ?? ''),
+export default defineConfig(({ mode }) => {
+  // loadEnv reads .env files (local dev); process.env is the fallback for CI
+  // where vars are injected directly into the environment by GitHub Actions.
+  const fileEnv = loadEnv(mode, process.cwd(), '')
+  const getEnv = (key: string): string => fileEnv[key] ?? process.env[key] ?? ''
+
+  return {
+    define: {
+      __APP_VERSION__: JSON.stringify(appVersion),
+    },
+    plugins: [
+      react(),
+      electron({
+        main: {
+          entry: 'electron/main.ts',
+          vite: {
+            define: {
+              'process.env.FEEDBACK_FORM_URL': JSON.stringify(getEnv('FEEDBACK_FORM_URL')),
+              'process.env.FEEDBACK_FORM_ENTRY_EMAIL': JSON.stringify(getEnv('FEEDBACK_FORM_ENTRY_EMAIL')),
+              'process.env.FEEDBACK_FORM_ENTRY_CATEGORY': JSON.stringify(getEnv('FEEDBACK_FORM_ENTRY_CATEGORY')),
+              'process.env.FEEDBACK_FORM_ENTRY_SUBJECT': JSON.stringify(getEnv('FEEDBACK_FORM_ENTRY_SUBJECT')),
+              'process.env.FEEDBACK_FORM_ENTRY_DETAILS': JSON.stringify(getEnv('FEEDBACK_FORM_ENTRY_DETAILS')),
+            },
           },
         },
+        preload: {
+          input: path.join(__dirname, 'electron/preload.ts'),
+        },
+        renderer: {},
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
       },
-      preload: {
-        input: path.join(__dirname, 'electron/preload.ts'),
-      },
-      renderer: {},
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
     },
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (!id.includes('node_modules')) return;
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (!id.includes('node_modules')) return;
 
-          if (id.includes('/node_modules/react/') || id.includes('/node_modules/react-dom/')) {
-            return 'react-vendor';
-          }
+            if (id.includes('/node_modules/react/') || id.includes('/node_modules/react-dom/')) {
+              return 'react-vendor';
+            }
 
-          if (id.includes('/node_modules/lucide-react/')) {
-            return 'icons-vendor';
-          }
+            if (id.includes('/node_modules/lucide-react/')) {
+              return 'icons-vendor';
+            }
 
-          if (
-            id.includes('/node_modules/jspdf/') ||
-            id.includes('/node_modules/jspdf-autotable/')
-          ) {
-            return 'jspdf-vendor';
-          }
+            if (
+              id.includes('/node_modules/jspdf/') ||
+              id.includes('/node_modules/jspdf-autotable/')
+            ) {
+              return 'jspdf-vendor';
+            }
 
-          if (id.includes('/node_modules/pdf-lib/') || id.includes('/node_modules/@pdf-lib/')) {
-            return 'pdf-lib-vendor';
-          }
+            if (id.includes('/node_modules/pdf-lib/') || id.includes('/node_modules/@pdf-lib/')) {
+              return 'pdf-lib-vendor';
+            }
 
-          if (
-            id.includes('/node_modules/html2canvas/') ||
-            id.includes('/node_modules/dompurify/') ||
-            id.includes('/node_modules/canvg/')
-          ) {
-            return 'canvas-vendor';
-          }
+            if (
+              id.includes('/node_modules/html2canvas/') ||
+              id.includes('/node_modules/dompurify/') ||
+              id.includes('/node_modules/canvg/')
+            ) {
+              return 'canvas-vendor';
+            }
 
-          return undefined;
+            return undefined;
+          },
         },
       },
     },
-  },
+  }
 })