diff --git a/src/components/atoms/Card/Card.tsx b/src/components/atoms/Card/Card.tsx
index bcacf57..5e00b05 100644
--- a/src/components/atoms/Card/Card.tsx
+++ b/src/components/atoms/Card/Card.tsx
@@ -63,10 +63,9 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
         elevation={0}
         sx={[
           // Selected state: brand border + warm background
+          // Border width is always 2px (set in theme) — only colour changes here
           selected && {
             borderColor: 'var(--fa-card-border-selected)',
-            borderWidth: '2px',
-            borderStyle: 'solid',
             backgroundColor: 'var(--fa-card-background-selected)',
           },
           // Interactive: hover fill + shadow lift + pointer
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 5317abd..00b2489 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -479,7 +479,10 @@ export const theme = createTheme({
           borderRadius: parseInt(t.CardBorderRadiusDefault, 10),
           backgroundColor: t.CardBackgroundDefault,
           boxShadow: t.CardShadowDefault,
-          transition: 'box-shadow 150ms ease-in-out',
+          // Reserve 2px border on ALL cards (transparent for elevated, coloured for outlined).
+          // Prevents layout shift when toggling selected state.
+          border: '2px solid transparent',
+          transition: 'box-shadow 150ms ease-in-out, border-color 150ms ease-in-out, background-color 150ms ease-in-out',
         },
       },
       variants: [