diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index 8c4772c..b7465c8 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -305,23 +305,69 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
       onBack={onBack}
       sx={sx}
       secondaryPanel={
-        mapPanel || (
-          <Box
+        <Box sx={{ position: 'relative', flex: 1, display: 'flex' }}>
+          {/* Floating view toggle */}
+          <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
+            size="small"
+            aria-label="View mode"
             sx={{
-              bgcolor: 'var(--fa-color-surface-cool)',
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderLeft: '1px solid',
-              borderColor: 'divider',
+              position: 'absolute',
+              top: 12,
+              left: 12,
+              zIndex: 1,
+              bgcolor: 'background.paper',
+              boxShadow: 'var(--fa-shadow-md)',
+              borderRadius: 1,
+              '& .MuiToggleButton-root': {
+                px: 1.5,
+                py: 0.5,
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                gap: 0.5,
+                border: '1px solid',
+                borderColor: 'divider',
+                textTransform: 'none',
+                '&.Mui-selected': {
+                  bgcolor: 'var(--fa-color-brand-100)',
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
+                },
+              },
             }}
           >
-            <Typography variant="body1" color="text.secondary">
-              Map coming soon
-            </Typography>
-          </Box>
-        )
+            <ToggleButton value="list" aria-label="List view">
+              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
+              List
+            </ToggleButton>
+            <ToggleButton value="map" aria-label="Map view">
+              <MapOutlinedIcon sx={{ fontSize: 16 }} />
+              Map
+            </ToggleButton>
+          </ToggleButtonGroup>
+
+          {/* Map content */}
+          {mapPanel || (
+            <Box
+              sx={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bgcolor: 'var(--fa-color-surface-cool)',
+                borderLeft: '1px solid',
+                borderColor: 'divider',
+              }}
+            >
+              <Typography variant="body1" color="text.secondary">
+                Map coming soon
+              </Typography>
+            </Box>
+          )}
+        </Box>
       }
     >
       {/* Heading — scrolls with listings */}
@@ -371,7 +417,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           sx={{ mb: 1.5 }}
         />
 
-        {/* Control bar — view toggle, filters, sort on one line */}
+        {/* Control bar — filters + sort */}
         <Box
           sx={{
             display: 'flex',
@@ -379,42 +425,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
             gap: 1,
           }}
         >
-          {/* View toggle */}
-          <ToggleButtonGroup
-            value={viewMode}
-            exclusive
-            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
-            size="small"
-            aria-label="View mode"
-            sx={{
-              '& .MuiToggleButton-root': {
-                px: 1.5,
-                py: 0.5,
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                gap: 0.5,
-                border: '1px solid',
-                borderColor: 'divider',
-                textTransform: 'none',
-                '&.Mui-selected': {
-                  bgcolor: 'var(--fa-color-brand-100)',
-                  color: 'primary.main',
-                  borderColor: 'primary.main',
-                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
-                },
-              },
-            }}
-          >
-            <ToggleButton value="list" aria-label="List view">
-              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
-              List
-            </ToggleButton>
-            <ToggleButton value="map" aria-label="Map view">
-              <MapOutlinedIcon sx={{ fontSize: 16 }} />
-              Map
-            </ToggleButton>
-          </ToggleButtonGroup>
-
           {/* Filters */}
           <FilterPanel activeCount={activeCount} onClear={handleClear}>
             {/* ── Location ── */}
@@ -631,7 +641,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
         <Typography
           variant="caption"
           color="text.secondary"
-          sx={{ mt: 1, display: 'block' }}
+          sx={{ mt: 2, display: 'block' }}
           aria-live="polite"
         >
           {providers.length} provider{providers.length !== 1 ? 's' : ''} found
diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx
index ad41c7e..ecaaf5b 100644
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -249,23 +249,69 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       onBack={onBack}
       sx={sx}
       secondaryPanel={
-        mapPanel || (
-          <Box
+        <Box sx={{ position: 'relative', flex: 1, display: 'flex' }}>
+          {/* Floating view toggle */}
+          <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
+            size="small"
+            aria-label="View mode"
             sx={{
-              bgcolor: 'var(--fa-color-surface-cool)',
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderLeft: '1px solid',
-              borderColor: 'divider',
+              position: 'absolute',
+              top: 12,
+              left: 12,
+              zIndex: 1,
+              bgcolor: 'background.paper',
+              boxShadow: 'var(--fa-shadow-md)',
+              borderRadius: 1,
+              '& .MuiToggleButton-root': {
+                px: 1.5,
+                py: 0.5,
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                gap: 0.5,
+                border: '1px solid',
+                borderColor: 'divider',
+                textTransform: 'none',
+                '&.Mui-selected': {
+                  bgcolor: 'var(--fa-color-brand-100)',
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
+                },
+              },
             }}
           >
-            <Typography variant="body1" color="text.secondary">
-              Map coming soon
-            </Typography>
-          </Box>
-        )
+            <ToggleButton value="list" aria-label="List view">
+              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
+              List
+            </ToggleButton>
+            <ToggleButton value="map" aria-label="Map view">
+              <MapOutlinedIcon sx={{ fontSize: 16 }} />
+              Map
+            </ToggleButton>
+          </ToggleButtonGroup>
+
+          {/* Map content */}
+          {mapPanel || (
+            <Box
+              sx={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bgcolor: 'var(--fa-color-surface-cool)',
+                borderLeft: '1px solid',
+                borderColor: 'divider',
+              }}
+            >
+              <Typography variant="body1" color="text.secondary">
+                Map coming soon
+              </Typography>
+            </Box>
+          )}
+        </Box>
       }
     >
       {/* Heading — scrolls with listings */}
@@ -315,7 +361,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           sx={{ mb: 1.5 }}
         />
 
-        {/* Control bar — view toggle, filters, sort on one line */}
+        {/* Control bar — filters + sort */}
         <Box
           sx={{
             display: 'flex',
@@ -323,42 +369,6 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             gap: 1,
           }}
         >
-          {/* View toggle */}
-          <ToggleButtonGroup
-            value={viewMode}
-            exclusive
-            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
-            size="small"
-            aria-label="View mode"
-            sx={{
-              '& .MuiToggleButton-root': {
-                px: 1.5,
-                py: 0.5,
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                gap: 0.5,
-                border: '1px solid',
-                borderColor: 'divider',
-                textTransform: 'none',
-                '&.Mui-selected': {
-                  bgcolor: 'var(--fa-color-brand-100)',
-                  color: 'primary.main',
-                  borderColor: 'primary.main',
-                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
-                },
-              },
-            }}
-          >
-            <ToggleButton value="list" aria-label="List view">
-              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
-              List
-            </ToggleButton>
-            <ToggleButton value="map" aria-label="Map view">
-              <MapOutlinedIcon sx={{ fontSize: 16 }} />
-              Map
-            </ToggleButton>
-          </ToggleButtonGroup>
-
           {/* Filters */}
           <FilterPanel activeCount={activeCount} onClear={handleClear}>
             {/* ── Location ── */}
@@ -514,7 +524,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         <Typography
           variant="caption"
           color="text.secondary"
-          sx={{ mt: 1, display: 'block' }}
+          sx={{ mt: 2, display: 'block' }}
           aria-live="polite"
         >
           {venues.length} venue{venues.length !== 1 ? 's' : ''}