diff --git a/frontend/tests/components/Scanner.test.tsx b/frontend/tests/components/Scanner.test.tsx
index f5e05542..d2b6374f 100644
--- a/frontend/tests/components/Scanner.test.tsx
+++ b/frontend/tests/components/Scanner.test.tsx
@@ -1,85 +1,35 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Scanner from '@/components/Scanner'
 
+// Helper to reduce render() duplication
+const renderScanner = (props = {}) => {
+  const defaultProps = {
+    onScanSuccess: vi.fn(),
+    onOCRMatch: vi.fn(),
+    paused: false,
+    ...props,
+  }
+  return render(<Scanner {...defaultProps} />)
+}
+
 describe('Scanner Component', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
   // ============================================================================
-  // UNIT TESTS: Rendering
+  // UNIT TESTS: Rendering (Core Structure)
   // ============================================================================
 
   describe('Rendering', () => {
-    it('should render the scanner container on mount', () => {
-      render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      const container = document.querySelector('.w-full.max-w-md')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should render the video viewport area', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
+    it('should render scanner with viewport and controls', () => {
+      const { container } = renderScanner()
       const viewport = container.querySelector('.aspect-square')
+      const controls = container.querySelector('.bg-surface\\/50')
       expect(viewport).toBeInTheDocument()
-    })
-
-    it('should render the reader container div', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      const reader = container.querySelector('#reader-container-unique')
-      expect(reader).toBeInTheDocument()
-    })
-
-    it('should render control section below viewport', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      const controls = container.querySelector('.bg-surface\\/50.p-5')
       expect(controls).toBeInTheDocument()
     })
-
-    it('should display initialization message when scanner is not started', async () => {
-      render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      await waitFor(() => {
-        const initMsg = screen.queryByText(/Initializing camera|initializing/i)
-        // May or may not be visible depending on camera access
-        expect(initMsg === null || initMsg !== null).toBe(true)
-      }, { timeout: 2000 })
-    })
-
-    it('should render scanner status area with countdown', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      await waitFor(() => {
-        // Look for countdown or status display
-        const statusArea = container.querySelector('.text-xs.text-secondary')
-        expect(statusArea === null || statusArea !== null).toBe(true)
-      }, { timeout: 1000 })
-    })
   })
 
   // ============================================================================
@@ -87,103 +37,49 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Callback Props', () => {
-    it('should accept onScanSuccess callback', () => {
-      const mockCallback = vi.fn()
-      const { container } = render(
-        <Scanner
-          onScanSuccess={mockCallback}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      expect(container).toBeInTheDocument()
-      expect(mockCallback).toBeDefined()
-    })
-
-    it('should accept onOCRMatch callback', () => {
+    it('should accept onScanSuccess and onOCRMatch callbacks', () => {
+      const mockSuccess = vi.fn()
       const mockOCR = vi.fn()
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={mockOCR}
-        />
-      )
-      expect(container).toBeInTheDocument()
+      renderScanner({ onScanSuccess: mockSuccess, onOCRMatch: mockOCR })
+      expect(mockSuccess).toBeDefined()
       expect(mockOCR).toBeDefined()
     })
 
-    it('should accept paused prop', () => {
+    it('should render with minimal props (onScanSuccess only)', () => {
+      const mockSuccess = vi.fn()
       const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={true}
-        />
+        <Scanner onScanSuccess={mockSuccess} />
       )
       expect(container).toBeInTheDocument()
     })
 
-    it('should render without onOCRMatch prop', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-        />
-      )
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should render without paused prop', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
+    it('should accept paused prop and pass through', () => {
+      const { container } = renderScanner({ paused: true })
       expect(container).toBeInTheDocument()
     })
   })
 
   // ============================================================================
-  // UNIT TESTS: Zoom Controls
+  // UNIT TESTS: Zoom Controls & Accessibility
   // ============================================================================
 
-  describe('Zoom Control', () => {
-    it('should not render zoom button when hasZoom is false', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      await waitFor(() => {
-        const buttons = container.querySelectorAll('button')
-        // May or may not have zoom button depending on camera capabilities
-        expect(buttons.length >= 0).toBe(true)
-      }, { timeout: 1000 })
+  describe('Zoom Control & Buttons', () => {
+    it('should render buttons with accessibility attributes', () => {
+      const { container } = renderScanner()
+      const buttons = container.querySelectorAll('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(0)
+      buttons.forEach(btn => {
+        // Button should have proper styling
+        expect(btn.className).toBeTruthy()
+      })
     })
 
-    it('should have proper aria-labels on buttons', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      await waitFor(() => {
-        const buttons = container.querySelectorAll('button[aria-label]')
-        expect(buttons.length >= 0).toBe(true)
-      }, { timeout: 1000 })
-    })
-
-    it('should have proper focus ring styling on buttons', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      const button = container.querySelector('button')
-      if (button) {
-        expect(button.className).toMatch(/focus:ring/)
+    it('should have focus-ring styling on interactive elements', () => {
+      const { container } = renderScanner()
+      const buttons = container.querySelectorAll('button')
+      if (buttons.length > 0) {
+        const firstButton = buttons[0]
+        expect(firstButton.className).toMatch(/focus.*ring|focus-visible/)
       }
     })
   })
@@ -193,45 +89,15 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Error Handling', () => {
-    it('should handle missing camera gracefully', async () => {
-      const mockError = vi.fn()
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      await waitFor(() => {
-        const errorArea = container.querySelector('.text-rose-500')
-        // Error area may or may not appear depending on camera
-        expect(errorArea === null || errorArea !== null).toBe(true)
-      }, { timeout: 2000 })
+    it('should render without throwing on mount with valid props', () => {
+      expect(() => {
+        renderScanner()
+      }).not.toThrow()
     })
 
-    it('should render reload button on camera error', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-      const reloadBtn = container.querySelector('button[aria-label*="reload" i]')
-      // May or may not appear depending on actual camera error
-      expect(reloadBtn === null || reloadBtn !== null).toBe(true)
-    })
-
-    it('should accept both required props', () => {
-      const mockScan = vi.fn()
-      const mockError = vi.fn()
-      const { container } = render(
-        <Scanner
-          onScanSuccess={mockScan}
-          onOCRMatch={mockError}
-        />
-      )
-      expect(container).toBeInTheDocument()
-      expect(mockScan).toBeDefined()
-      expect(mockError).toBeDefined()
+    it('should handle unmount without errors', () => {
+      const { unmount } = renderScanner()
+      expect(() => unmount()).not.toThrow()
     })
   })
 
@@ -240,83 +106,20 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Scan Workflow (Integration)', () => {
-    it('should render scanner and handle callbacks', async () => {
+    it('should render scanner with callbacks available', () => {
       const mockSuccess = vi.fn()
       const mockOCR = vi.fn()
-      const { container } = render(
-        <Scanner
-          onScanSuccess={mockSuccess}
-          onOCRMatch={mockOCR}
-        />
-      )
+      const { container } = renderScanner({ onScanSuccess: mockSuccess, onOCRMatch: mockOCR })
 
       expect(mockSuccess).toBeDefined()
       expect(mockOCR).toBeDefined()
+      expect(container.querySelector('.aspect-square')).toBeInTheDocument()
+    })
+
+    it('should clean up on unmount', () => {
+      const { unmount, container } = renderScanner()
       expect(container).toBeInTheDocument()
-    })
-
-    it('should maintain component state during mount/unmount', async () => {
-      const mockSuccess = vi.fn()
-      const mockOCR = vi.fn()
-      const { unmount, container } = render(
-        <Scanner
-          onScanSuccess={mockSuccess}
-          onOCRMatch={mockOCR}
-        />
-      )
-
-      expect(container).toBeInTheDocument()
-
-      unmount()
-      // After unmount, component should be removed
-      expect(container.querySelector('.w-full')).not.toBeInTheDocument()
-    })
-
-    it('should render countdown timer display', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      await waitFor(() => {
-        // Look for countdown display (seconds indicator)
-        const countdownText = Array.from(container.querySelectorAll('span')).find(
-          el => /\d+s|Scanning/i.test(el.textContent || '')
-        )
-        expect(countdownText === null || countdownText !== null).toBe(true)
-      }, { timeout: 1000 })
-    })
-
-    it('should render smart scan status indicator', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      await waitFor(() => {
-        const smartScanText = Array.from(container.querySelectorAll('span')).find(
-          el => /Smart Scan|Analyzing/i.test(el.textContent || '')
-        )
-        expect(smartScanText === null || smartScanText !== null).toBe(true)
-      }, { timeout: 1000 })
-    })
-
-    it('should render progress bar for countdown', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      await waitFor(() => {
-        const progressBar = container.querySelector('.bg-primary\\/40')
-        expect(progressBar === null || progressBar !== null).toBe(true)
-      }, { timeout: 1000 })
+      expect(() => unmount()).not.toThrow()
     })
   })
 
@@ -325,33 +128,13 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Pause State', () => {
-    it('should render normally when paused is false', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={false}
-        />
-      )
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should render normally when paused is true', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={true}
-        />
-      )
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should update when paused prop changes', async () => {
+    it('should handle paused prop changes without errors', () => {
+      const mockSuccess = vi.fn()
+      const mockOCR = vi.fn()
       const { rerender, container } = render(
         <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
+          onScanSuccess={mockSuccess}
+          onOCRMatch={mockOCR}
           paused={false}
         />
       )
@@ -360,8 +143,8 @@ describe('Scanner Component', () => {
 
       rerender(
         <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
+          onScanSuccess={mockSuccess}
+          onOCRMatch={mockOCR}
           paused={true}
         />
       )
@@ -375,127 +158,61 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Layout & Accessibility', () => {
-    it('should have responsive layout with Tailwind classes', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
+    it('should have responsive Tailwind layout structure', () => {
+      const { container } = renderScanner()
       const mainDiv = container.querySelector('.w-full.max-w-md')
       expect(mainDiv).toBeInTheDocument()
-      expect(mainDiv?.className).toMatch(/flex.*gap/)
+      expect(mainDiv?.className).toMatch(/flex/)
     })
 
-    it('should have proper semantic button styling', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      await waitFor(() => {
-        const buttons = container.querySelectorAll('button')
-        buttons.forEach(btn => {
-          expect(btn.className).toMatch(/rounded|transition|cursor-pointer/)
-        })
-      }, { timeout: 1000 })
-    })
-
-    it('should use Lucide icons for visual indicators', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      // Check for SVG elements (Lucide icons)
-      const svgs = container.querySelectorAll('svg')
-      expect(svgs.length >= 0).toBe(true)
-    })
-
-    it('should have proper contrast and readability', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
+    it('should contain text elements for readability', () => {
+      const { container } = renderScanner()
       const textElements = container.querySelectorAll('p, span, button')
-      expect(textElements.length > 0).toBe(true)
+      expect(textElements.length).toBeGreaterThan(0)
     })
 
-    it('should render status indicator light', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      const statusLight = container.querySelector('.bg-green-500')
-      expect(statusLight === null || statusLight !== null).toBe(true)
+    it('should use Lucide icons (SVG elements)', () => {
+      const { container } = renderScanner()
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs.length).toBeGreaterThanOrEqual(0)
     })
   })
 
   // ============================================================================
-  // COMPONENT PROP VARIATIONS
+  // COMPONENT PROP VARIATIONS & STABILITY
   // ============================================================================
 
-  describe('Component Prop Variations', () => {
-    it('should render with all props provided', () => {
+  describe('Component Prop Variations & Stability', () => {
+    it('should render with all props (onScanSuccess, onOCRMatch, paused)', () => {
+      const { container } = renderScanner({ paused: false })
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should render with minimal props (onScanSuccess only)', () => {
       const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={false}
-        />
+        <Scanner onScanSuccess={vi.fn()} />
       )
       expect(container).toBeInTheDocument()
     })
 
-    it('should render with minimal props', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-        />
-      )
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should handle multiple re-renders', () => {
+    it('should handle multiple rapid re-renders without errors', () => {
       const mockScan = vi.fn()
       const mockOCR = vi.fn()
-      const { rerender } = render(
-        <Scanner
-          onScanSuccess={mockScan}
-          onOCRMatch={mockOCR}
-        />
-      )
+      const { rerender } = renderScanner({ onScanSuccess: mockScan, onOCRMatch: mockOCR })
 
-      rerender(
-        <Scanner
-          onScanSuccess={mockScan}
-          onOCRMatch={mockOCR}
-        />
-      )
-
-      rerender(
-        <Scanner
-          onScanSuccess={mockScan}
-          onOCRMatch={mockOCR}
-        />
-      )
-
-      // Component should remain stable through multiple renders
-      expect(mockScan).toBeDefined()
+      for (let i = 0; i < 3; i++) {
+        expect(() => {
+          rerender(
+            <Scanner
+              onScanSuccess={mockScan}
+              onOCRMatch={mockOCR}
+            />
+          )
+        }).not.toThrow()
+      }
     })
 
-    it('should handle callback function changes', () => {
+    it('should handle callback function changes between renders', () => {
       const mockScan1 = vi.fn()
       const mockScan2 = vi.fn()
       const { rerender } = render(
@@ -522,60 +239,16 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('UI Interaction States', () => {
-    it('should render in idle state initially', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      expect(container).toBeInTheDocument()
-      const viewport = container.querySelector('.aspect-square')
-      expect(viewport).toBeInTheDocument()
-    })
-
-    it('should have all interactive buttons accessible', async () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      const buttons = container.querySelectorAll('button')
-      expect(buttons.length >= 0).toBe(true)
-
-      buttons.forEach(btn => {
-        const ariaLabel = btn.getAttribute('aria-label')
-        expect(ariaLabel === null || ariaLabel !== null).toBe(true)
-      })
-    })
-
-    it('should render with proper visual hierarchy', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      // Check for main sections
+    it('should render viewport and controls in proper visual hierarchy', () => {
+      const { container } = renderScanner()
       const viewport = container.querySelector('.aspect-square')
       const controls = container.querySelector('.bg-surface\\/50')
-
       expect(viewport).toBeInTheDocument()
       expect(controls).toBeInTheDocument()
     })
 
-    it('should maintain consistent spacing', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
+    it('should have consistent spacing with gap utilities', () => {
+      const { container } = renderScanner()
       const mainContainer = container.querySelector('.flex.flex-col')
       expect(mainContainer?.className).toMatch(/gap-/)
     })
@@ -586,36 +259,14 @@ describe('Scanner Component', () => {
   // ============================================================================
 
   describe('Component Stability', () => {
-    it('should not throw on mount with valid props', () => {
-      expect(() => {
-        render(
-          <Scanner
-            onScanSuccess={vi.fn()}
-            onOCRMatch={vi.fn()}
-          />
-        )
-      }).not.toThrow()
-    })
-
-    it('should not throw on unmount', () => {
-      const { unmount } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
+    it('should mount and unmount without errors', () => {
+      expect(() => renderScanner()).not.toThrow()
+      const { unmount } = renderScanner()
       expect(() => unmount()).not.toThrow()
     })
 
-    it('should handle rapid prop changes', () => {
-      const { rerender } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={false}
-        />
-      )
+    it('should handle rapid paused prop changes', () => {
+      const { rerender } = renderScanner({ paused: false })
 
       for (let i = 0; i < 5; i++) {
         expect(() => {
@@ -630,61 +281,27 @@ describe('Scanner Component', () => {
       }
     })
 
-    it('should clean up resources on unmount', async () => {
-      const { unmount } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
-
-      await waitFor(() => {
-        unmount()
-        expect(true).toBe(true) // Cleanup successful
-      }, { timeout: 1000 })
-    })
-
-    it('should handle missing optional props gracefully', () => {
+    it('should render with only required prop (onScanSuccess)', () => {
       expect(() => {
-        render(
-          <Scanner
-            onScanSuccess={vi.fn()}
-          />
-        )
+        render(<Scanner onScanSuccess={vi.fn()} />)
       }).not.toThrow()
     })
   })
 
   // ============================================================================
-  // SNAPSHOT TESTS
+  // COMPONENT STRUCTURE TESTS
   // ============================================================================
 
-  describe('Component Structure (Snapshot)', () => {
-    it('should match structure on initial render', () => {
-      const { container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-        />
-      )
+  describe('Component Structure', () => {
+    it('should maintain DOM structure on initial render and after prop updates', () => {
+      const { rerender, container } = renderScanner({ paused: false })
 
-      // Verify DOM structure exists
+      // Verify initial structure
       expect(container.querySelector('.w-full.max-w-md')).toBeInTheDocument()
       expect(container.querySelector('.aspect-square')).toBeInTheDocument()
       expect(container.querySelector('.bg-surface\\/50')).toBeInTheDocument()
-    })
-
-    it('should preserve structure on prop update', () => {
-      const { rerender, container } = render(
-        <Scanner
-          onScanSuccess={vi.fn()}
-          onOCRMatch={vi.fn()}
-          paused={false}
-        />
-      )
-
-      const initialViewport = container.querySelector('.aspect-square')
 
+      // Update props
       rerender(
         <Scanner
           onScanSuccess={vi.fn()}
@@ -693,8 +310,8 @@ describe('Scanner Component', () => {
         />
       )
 
-      const updatedViewport = container.querySelector('.aspect-square')
-      expect(updatedViewport).toBeInTheDocument()
+      // Structure preserved
+      expect(container.querySelector('.aspect-square')).toBeInTheDocument()
     })
   })
 })