diff --git a/packages/web/src/components/ui/Mascot.tsx b/packages/web/src/components/ui/Mascot.tsx
index 01bc0087..6513bac8 100644
--- a/packages/web/src/components/ui/Mascot.tsx
+++ b/packages/web/src/components/ui/Mascot.tsx
@@ -18,7 +18,7 @@ interface MascotProps {
 interface SvgProps {
   palette: (typeof MASCOT_PALETTES)[MascotState];
   gradientId: string;
-  svgRef: React.RefObject<SVGSVGElement | null>;
+  svgRef: React.Ref<SVGSVGElement>;
 }
 
 function IdleSvg({ palette, gradientId, svgRef }: SvgProps) {
@@ -240,10 +240,8 @@ export function Mascot({ state, className }: MascotProps) {
 
   useMascotAnimation(svgRef, containerRef, state);
 
-  const classes = className ? `w-32 h-32 ${className}` : 'w-32 h-32';
-
   return (
-    <div ref={containerRef} role="presentation" className={classes} style={{ position: 'relative' }}>
+    <div ref={containerRef} role="presentation" className={`relative ${className ?? 'w-32 h-32'}`}>
       {state === 'idle' && <IdleSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'sleeping' && <SleepingSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'excited' && <ExcitedSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
diff --git a/packages/web/src/components/ui/__tests__/Mascot.test.tsx b/packages/web/src/components/ui/__tests__/Mascot.test.tsx
index a269668d..9ee807de 100644
--- a/packages/web/src/components/ui/__tests__/Mascot.test.tsx
+++ b/packages/web/src/components/ui/__tests__/Mascot.test.tsx
@@ -94,11 +94,20 @@ describe('Mascot', () => {
     expect(shadow).toBeTruthy();
   });
 
-  it('applies custom className', () => {
+  it('applies custom className replacing default size', () => {
     const { container } = render(<Mascot state="idle" className="w-48 h-48" />);
     const wrapper = container.firstElementChild as HTMLElement;
     expect(wrapper.className).toContain('w-48');
     expect(wrapper.className).toContain('h-48');
+    // Custom className replaces default w-32 h-32 to avoid Tailwind conflicts
+    expect(wrapper.className).not.toContain('w-32');
+  });
+
+  it('uses default w-32 h-32 when no className provided', () => {
+    const { container } = render(<Mascot state="idle" />);
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('w-32');
+    expect(wrapper.className).toContain('h-32');
   });
 
   it('renders the sleeping mouth ellipse', () => {