diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index d6741232..7919e6dc 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -10,6 +10,21 @@ import { getDataGridLocale } from './utils/dataGridLocale';
 import { useMemo } from 'react';
 export { HeadHeight } from './layout';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+  interface PaletteOptions {
+    custom?: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+}
+
 function App(): React.JSX.Element {
   const lang = useSelector((state: IState) => state.strings.lang, shallowEqual);
 
@@ -19,19 +34,65 @@ function App(): React.JSX.Element {
         {
           palette: {
             primary: {
-              main: '#135CB9', //Original: 135CB9, Better color: 1D9F90
+              main: '#135CB9',
             },
             secondary: {
-              main: '#00A7E1', //Original: 00A7E1, Better color: 25CBB8
+              main: '#00A7E1',
             },
-            // Custom colors - simple key-value pairs
             custom: {
-              currentRegion: 'rgb(102, 255, 0, .5)',
+              currentRegion: '#66FF0080',
+              headerBackground: '#EEEEEE',
             },
-          } as any,
+          },
           typography: {
             button: {
-              textTransform: 'capitalize',
+              textTransform: 'none',
+            },
+          },
+          components: {
+            MuiAppBar: {
+              styleOverrides: {
+                root: {
+                  boxShadow: 'none',
+                },
+              },
+            },
+            MuiButton: {
+              defaultProps: {
+                disableElevation: true,
+              },
+              styleOverrides: {
+                root: {
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  boxShadow: '1px 1px 3px #0000001F',
+                  color: '#000000',
+                  height: 36,
+                  background: '#FFFFFF',
+                  '&:hover': {
+                    background: '#E2E2E2',
+                  },
+                  '&:disabled': {
+                    background: '#F0F0F0',
+                  },
+                },
+              },
+              variants: [
+                {
+                  // Contained buttons are primary buttons
+                  props: { variant: 'contained' },
+                  style: {
+                    background: '#333333',
+                    color: '#FFFFFF',
+                    '&:hover': {
+                      background: '#555555',
+                    },
+                    '&:disabled': {
+                      background: '#F0F0F0',
+                    },
+                  },
+                },
+              ],
             },
           },
         },
diff --git a/src/renderer/src/components/App/AppHead.tsx b/src/renderer/src/components/App/AppHead.tsx
index ae9263be..652ab0a5 100644
--- a/src/renderer/src/components/App/AppHead.tsx
+++ b/src/renderer/src/components/App/AppHead.tsx
@@ -3,11 +3,7 @@ import { useGetGlobal, useGlobal } from '../../context/useGlobal';
 import { useLocation } from 'react-router-dom';
 import { IState, IViewModeStrings } from '../../model';
 import { shallowEqual, useSelector } from 'react-redux';
-import {
-  AppBar,
-  LinearProgress,
-  Box,
-} from '@mui/material';
+import { AppBar, LinearProgress, Box } from '@mui/material';
 import { isElectron } from '../../../api-variable';
 import { TokenContext } from '../../context/TokenProvider';
 import { UnsavedContext } from '../../context/UnsavedContext';
@@ -285,7 +281,12 @@ export const AppHead = (props: IProps) => {
   return (
     <AppBar
       position="fixed"
-      sx={{ width: '100%', display: 'flex' }}
+      sx={{
+        width: '100%',
+        display: 'flex',
+        px: 1.5,
+        backgroundColor: 'custom.headerBackground',
+      }}
       color="inherit"
     >
       <>
diff --git a/src/renderer/src/components/App/DesktopToolbar.tsx b/src/renderer/src/components/App/DesktopToolbar.tsx
index 5caa5584..00978720 100644
--- a/src/renderer/src/components/App/DesktopToolbar.tsx
+++ b/src/renderer/src/components/App/DesktopToolbar.tsx
@@ -98,7 +98,7 @@ export const DesktopToolbar = ({
   tv,
 }: DesktopToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!home && orgRole && (
         <>
           <ProjectName switchTo={switchTo ?? false} />
diff --git a/src/renderer/src/components/App/MobileToolbar.tsx b/src/renderer/src/components/App/MobileToolbar.tsx
index 897266f4..11ccd567 100644
--- a/src/renderer/src/components/App/MobileToolbar.tsx
+++ b/src/renderer/src/components/App/MobileToolbar.tsx
@@ -40,9 +40,9 @@ export const MobileToolbar = ({
   handleUserMenu,
 }: MobileToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!isDetail ? (
-        <IconButton onClick={() => navigate('/team')} sx={{ p: 0 }}>
+        <IconButton onClick={() => navigate('/team')}>
           <ApmLogo sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       ) : (
diff --git a/src/renderer/src/components/HelpMenu.tsx b/src/renderer/src/components/HelpMenu.tsx
index 45442834..c9e8f304 100644
--- a/src/renderer/src/components/HelpMenu.tsx
+++ b/src/renderer/src/components/HelpMenu.tsx
@@ -7,7 +7,7 @@ import ReportIcon from '@mui/icons-material/Report';
 import NotesIcon from '@mui/icons-material/SpeakerNotes';
 import BooksIcon from '@mui/icons-material/LibraryBooks';
 import TrainingIcon from '@mui/icons-material/FlightClass';
-import HelpIcon from '@mui/icons-material/Help';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import InfoIcon from '@mui/icons-material/Info';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -178,10 +178,9 @@ export function HelpMenu(props: IProps) {
       <IconButton
         aria-controls="customized-menu"
         aria-haspopup="true"
-        color="primary"
         onClick={handleClick}
       >
-        <HelpIcon />
+        <HelpOutlineIcon />
       </IconButton>
       <StyledMenu
         id="helpClose"
@@ -193,14 +192,14 @@ export function HelpMenu(props: IProps) {
       >
         <StyledMenuItem id="helpHelp" onClick={handleHelp('')}>
           <ListItemIcon>
-            <HelpIcon />
+            <HelpOutlineIcon />
           </ListItemIcon>
           <ListItemText primary={t.helpCenter} />
         </StyledMenuItem>
         {planRec && (
           <StyledMenuItem id="helpSheet" onClick={handleHelp(spreadsheetTopic)}>
             <ListItemIcon>
-              <HelpIcon />
+              <HelpOutlineIcon />
             </ListItemIcon>
             <ListItemText primary={t.helpSpreadsheet} />
           </StyledMenuItem>
diff --git a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
index 6fc3d086..f2bb5c0a 100644
--- a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
+++ b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
@@ -33,7 +33,7 @@ export default function PassageDetailMobileLayout({
     >
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderBottom: '1px solid',
           borderColor: 'divider',
         }}
@@ -42,6 +42,7 @@ export default function PassageDetailMobileLayout({
       </Box>
       <Box
         sx={{
+          backgroundColor: 'background.default',
           px: 1.5,
           pt: 1.5,
           pb: 1.5,
@@ -67,12 +68,11 @@ export default function PassageDetailMobileLayout({
       )}
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderTop: '1px solid',
           borderColor: 'divider',
-          px: 1,
-          pt: '4px',
-          pb: 'calc(2px + env(safe-area-inset-bottom, 0px))',
+          px: 1.5,
+          py: 1,
         }}
       >
         {footer}
diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
index 787fe93d..cfcbee31 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useGlobal } from '../../../context/useGlobal';
-import { Box, IconButton, Typography } from '@mui/material';
-import CompleteIcon from '@mui/icons-material/CheckBoxOutlined';
+import { Box, Button } from '@mui/material';
+import CompleteIcon from '@mui/icons-material/CheckBox';
 import NotCompleteIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import usePassageDetailContext from '../../../context/usePassageDetailContext';
 import { IPassageDetailStepCompleteStrings } from '../../../model';
@@ -78,37 +78,43 @@ export default function MobileStepComplete() {
   if (isBoldWorkflow) return null;
 
   return (
-    <Box
+    <Button
+      id="mobile-complete"
+      size="small"
+      title={t.title}
+      onClick={handleToggleComplete}
+      disabled={
+        !hasPermission || view !== '' || recording || busy || importexportBusy
+      }
+      startIcon={
+        complete ? (
+          <CompleteIcon
+            id="step-yes"
+            fontSize="small"
+            sx={{ color: 'black' }}
+          />
+        ) : (
+          <NotCompleteIcon id="step-no" fontSize="small" />
+        )
+      }
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.25,
-        minHeight: 0,
-        flexShrink: 0,
+        minWidth: 0,
         maxWidth: '100%',
       }}
     >
-      <IconButton
-        id="mobile-complete"
-        size="small"
-        title={t.title}
-        onClick={handleToggleComplete}
-        disabled={
-          !hasPermission || view !== '' || recording || busy || importexportBusy
-        }
-      >
-        {complete ? (
-          <CompleteIcon id="step-yes" fontSize="small" />
-        ) : (
-          <NotCompleteIcon id="step-no" fontSize="small" />
-        )}
-      </IconButton>
-      <Typography
-        variant="body2"
-        sx={{ lineHeight: 1.2, whiteSpace: 'nowrap' }}
+      <Box
+        component="span"
+        sx={{
+          display: 'block',
+          minWidth: 0,
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
       >
         {t.title}
-      </Typography>
-    </Box>
+      </Box>
+    </Button>
   );
 }
diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index b76ea5e9..63a07763 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -6,11 +6,9 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Menu,
   MenuItem,
   Typography,
-  useTheme,
 } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -58,7 +56,6 @@ export default function MobileWorkflowSteps() {
   const getGlobal = useGetGlobal();
   const { showMessage } = useSnackBar();
   const ts = useSelector(sharedSelector, shallowEqual);
-  const theme = useTheme();
   const getWfLabel = useWfLabel();
   const { getOrgDefault } = useOrgDefaults();
   const isStepProgression =
@@ -210,23 +207,25 @@ export default function MobileWorkflowSteps() {
             alignItems: 'center',
           }}
         >
-          {!isStepProgression && currentTip && (
-            <IconButton
-              size="small"
-              onClick={() => setTipOpen(true)}
-              data-cy="workflow-step-tip"
-              aria-label={currentTip}
-              color="info"
-            >
-              <InfoIcon fontSize="small" />
-            </IconButton>
-          )}
           <Button
             size="small"
+            startIcon={
+              !isStepProgression && currentTip ? (
+                <InfoIcon
+                  sx={{ color: 'primary.light' }}
+                  fontSize="small"
+                  data-cy="workflow-step-tip"
+                  aria-label={currentTip}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setTipOpen(true);
+                  }}
+                />
+              ) : undefined
+            }
             endIcon={hasMultipleOptions ? <ArrowDropDownIcon /> : undefined}
             sx={{
               minWidth: 'auto',
-              textTransform: 'none',
               // These per-breakpoint widths are fine-tuned to constrain the dropdown so
               // its label truncates before it can overlap the parallelograms
               maxWidth: { xs: '45vw', md: '20vw', lg: '25vw' },
@@ -318,10 +317,10 @@ export default function MobileWorkflowSteps() {
         >
           {steps.map((step) => {
             const color = step.isCurrent
-              ? theme.palette.grey[700]
+              ? '#111'
               : step.isComplete
-                ? theme.palette.grey[400]
-                : theme.palette.grey[200];
+                ? '#888'
+                : '#ccc';
             return (
               <Box
                 key={step.id}
@@ -366,7 +365,7 @@ export default function MobileWorkflowSteps() {
               aria-label={currentTip}
             >
               {getWfLabel(currentLabel) + '\u00A0'}
-              <InfoIcon color="info" fontSize="small" />
+              <InfoIcon sx={{ color: 'primary.light' }} fontSize="small" />
             </ButtonBase>
           ) : (
             getWfLabel(currentLabel)
diff --git a/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx b/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
index 437d7d51..98e3b225 100644
--- a/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
@@ -30,16 +30,15 @@ function NavButtonLabel({
 }: {
   text: string;
   title?: string;
-  align: 'left' | 'right';
+  align: 'left' | 'center' | 'right';
 }) {
   return (
     <Box
       component="span"
       title={title ?? text}
       sx={{
-        display: 'block',
+        flexGrow: 1,
         minWidth: 0,
-        maxWidth: '100%',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -143,69 +142,49 @@ export default function PassageDetailMobileFooter() {
     }
   };
 
+  const navButtonSx = {
+    flex: 1,
+    minWidth: 'clamp(60px, 16vw, 100px)',
+    maxWidth: 'clamp(110px, 30vw, 190px)',
+  } as const;
+
   return (
     <Box
       sx={{
-        display: 'grid',
-        gridTemplateColumns: isBoldWorkflow
-          ? 'minmax(0, 1fr) minmax(0, 1fr)'
-          : 'minmax(0, 1fr) auto minmax(0, 1fr)',
+        display: 'flex',
         alignItems: 'center',
-        gap: 0.5,
+        justifyContent: 'space-between',
+        gap: 1,
         width: '100%',
-        minHeight: 0,
       }}
     >
-      <Box sx={{ minWidth: 0, display: 'flex', justifyContent: 'flex-start' }}>
-        <Button
-          size="small"
-          startIcon={<ArrowBackIcon fontSize="small" />}
-          onClick={() => handleNavigate(false)}
-          disabled={!prevNavEnabled}
-          sx={{
-            minWidth: 0,
-            maxWidth: '100%',
-            justifyContent: 'flex-start',
-          }}
-        >
-          <NavButtonLabel
-            text={prevButtonText}
-            title={prevLabelFull}
-            align="left"
-          />
-        </Button>
-      </Box>
-      {!isBoldWorkflow && (
-        <Box
-          sx={{
-            flexShrink: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            minWidth: 'min-content',
-          }}
-        >
-          <MobileStepComplete />
-        </Box>
-      )}
-      <Box sx={{ minWidth: 0, display: 'flex', justifyContent: 'flex-end' }}>
-        <Button
-          size="small"
-          endIcon={<ArrowForwardIcon fontSize="small" />}
-          onClick={() => handleNavigate(true)}
-          disabled={!nextNavEnabled}
-          sx={{
-            minWidth: 0,
-            maxWidth: '100%',
-            justifyContent: 'flex-end',
-          }}
-        >
-          <NavButtonLabel
-            text={nextButtonText}
-            title={nextLabelFull}
-            align="right"
-          />
-        </Button>
-      </Box>
+      <Button
+        size="small"
+        startIcon={<ArrowBackIcon fontSize="small" />}
+        onClick={() => handleNavigate(false)}
+        disabled={!prevNavEnabled}
+        sx={{ ...navButtonSx, justifyContent: 'center' }}
+      >
+        <NavButtonLabel
+          text={prevButtonText}
+          title={prevLabelFull}
+          align="center"
+        />
+      </Button>
+      {!isBoldWorkflow && <MobileStepComplete />}
+      <Button
+        size="small"
+        endIcon={<ArrowForwardIcon fontSize="small" />}
+        onClick={() => handleNavigate(true)}
+        disabled={!nextNavEnabled}
+        sx={{ ...navButtonSx, justifyContent: 'center' }}
+      >
+        <NavButtonLabel
+          text={nextButtonText}
+          title={nextLabelFull}
+          align="center"
+        />
+      </Button>
     </Box>
   );
 }
diff --git a/src/renderer/src/components/UserMenu.tsx b/src/renderer/src/components/UserMenu.tsx
index c630f36e..ef149498 100644
--- a/src/renderer/src/components/UserMenu.tsx
+++ b/src/renderer/src/components/UserMenu.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useGlobal } from '../context/useGlobal';
 import { IMainStrings, ISharedStrings, User, UserD } from '../model';
 import {
-  Button,
+  IconButton,
   ListItemIcon,
   ListItemText,
   Typography,
@@ -97,15 +97,14 @@ export function UserMenu(props: IProps) {
 
   return (
     <div>
-      <Button
+      <IconButton
         id="userMenu"
         aria-controls="custom-user-menu"
         aria-haspopup="true"
         onClick={handleClick}
-        sx={{ minWidth: '24px', minHeight: '24px' }}
       >
         <UserAvatar userRec={userRec} small={small} />
-      </Button>
+      </IconButton>
       <StyledMenu
         id="custom-user-menu"
         anchorEl={anchorEl}
diff --git a/src/renderer/src/routes/PassageDetail.tsx b/src/renderer/src/routes/PassageDetail.tsx
index 80cb0591..5157487d 100644
--- a/src/renderer/src/routes/PassageDetail.tsx
+++ b/src/renderer/src/routes/PassageDetail.tsx
@@ -115,6 +115,22 @@ export const PassageDetail = () => {
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
 
+  // Lock document scroll on mobile so only the inner content region scrolls;
+  // this prevents MobileWorkflowSteps being scrolled under the AppBar.
+  useEffect(() => {
+    if (!isMobile) return;
+    const { body } = document;
+    const html = document.documentElement;
+    const prevBody = body.style.overflow;
+    const prevHtml = html.style.overflow;
+    body.style.overflow = 'hidden';
+    html.style.overflow = 'hidden';
+    return () => {
+      body.style.overflow = prevBody;
+      html.style.overflow = prevHtml;
+    };
+  }, [isMobile]);
+
   if (view !== '' && view !== pathname) return <StickyRedirect to={view} />;
 
   return (
@@ -136,6 +152,7 @@ export const PassageDetail = () => {
               // AppHead is position:fixed — offset in-flow content like PassageDetailGrids does,
               // otherwise mobile layout height calc(100dvh - HeadHeight) leaves a gap at the bottom.
               pt: `${HeadHeight}px`,
+              backgroundColor: 'custom.headerBackground',
               width: '100%',
               flex: 1,
               minHeight: 0,