diff --git a/src/components/molecules/CompareBar/CompareBar.tsx b/src/components/molecules/CompareBar/CompareBar.tsx
index 2f55695..1bcd6dc 100644
--- a/src/components/molecules/CompareBar/CompareBar.tsx
+++ b/src/components/molecules/CompareBar/CompareBar.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
-import type { SxProps, Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
 import { Badge } from '../../atoms/Badge';
@@ -42,6 +43,8 @@ export interface CompareBarProps {
  */
 export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
   ({ packages, onCompare, error, sx }, ref) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const count = packages.length;
     const visible = count > 0;
     const canCompare = count >= 2;
@@ -59,29 +62,42 @@ export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
           sx={[
             (theme: Theme) => ({
               position: 'fixed',
-              bottom: theme.spacing(3),
-              left: '50%',
-              transform: 'translateX(-50%)',
+              // Clear the sticky HelpBar (~56px + 16px breathing) so the
+              // pill doesn't overlap it.
+              bottom: theme.spacing(9),
+              // Centre via auto-margin rather than `left:50%; translateX(-50%)`
+              // — Slide (the wrapper) animates via transform, which would
+              // otherwise clobber the centering transform.
+              left: 0,
+              right: 0,
+              mx: 'auto',
+              width: 'fit-content',
               zIndex: theme.zIndex.snackbar,
               borderRadius: '9999px',
               display: 'flex',
               alignItems: 'center',
-              gap: 2,
-              px: 3,
-              py: 1.5,
+              gap: { xs: 1.5, md: 2 },
+              px: { xs: 2, md: 3 },
+              py: { xs: 1, md: 1.5 },
               maxWidth: { xs: 'calc(100vw - 32px)', md: 460 },
             }),
             ...(Array.isArray(sx) ? sx : [sx]),
           ]}
         >
-          {/* Fraction badge — 1/3, 2/3, 3/3 */}
-          <Badge color="brand" variant="soft" size="large" sx={{ flexShrink: 0 }}>
+          {/* Fraction badge — 1/3, 2/3, 3/3. Responsive: medium on xs,
+              large on md+ to match the rest of the bar's size step. */}
+          <Badge
+            color="brand"
+            variant="soft"
+            size={isMobile ? 'medium' : 'large'}
+            sx={{ flexShrink: 0 }}
+          >
             {count}/3
           </Badge>
 
-          {/* Status text */}
+          {/* Status text — body2 on mobile (smaller footprint), body1 on md+ */}
           <Typography
-            variant="body1"
+            variant={isMobile ? 'body2' : 'body1'}
             role={error ? 'alert' : undefined}
             sx={{
               fontWeight: 500,
@@ -92,10 +108,10 @@ export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
             {error || statusText}
           </Typography>
 
-          {/* Compare CTA — icon dropped; label alone at medium size is enough */}
+          {/* Compare CTA — small (32px) on mobile, medium (40px) on md+ */}
           <Button
             variant="contained"
-            size="medium"
+            size={isMobile ? 'small' : 'medium'}
             onClick={onCompare}
             disabled={!canCompare}
             sx={{ flexShrink: 0, borderRadius: '9999px' }}