diff --git a/frontend/src/components/Background.tsx b/frontend/src/components/Background.tsx
index 6aa5066b4..c45514aa2 100644
--- a/frontend/src/components/Background.tsx
+++ b/frontend/src/components/Background.tsx
@@ -6,7 +6,7 @@ interface BackgroundProps {
 
 export default function Background({ state = 'idle' }: BackgroundProps) {
     return (
-        <div className={`background background--${state}`}>
+        <div className={`background background--${state}`} aria-hidden="true">
             <div className="background-grid" />
             <div className="background-scan" />
             <div className="background-lines" />
diff --git a/frontend/testing/unit/components/Background.test.tsx b/frontend/testing/unit/components/Background.test.tsx
new file mode 100644
index 000000000..088c1848c
--- /dev/null
+++ b/frontend/testing/unit/components/Background.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import Background from '../../../src/components/Background'
+
+describe('Background Component', () => {
+  it('renders without crashing with default props', () => {
+    const { container } = render(<Background />)
+    const wrapper = container.querySelector('.background')
+    expect(wrapper).toBeInTheDocument()
+    expect(wrapper).toHaveClass('background--idle')
+  })
+
+  it('renders with different state props', () => {
+    const { container: activeContainer } = render(<Background state="active" />)
+    expect(activeContainer.querySelector('.background')).toHaveClass('background--active')
+
+    const { container: errorContainer } = render(<Background state="error" />)
+    expect(errorContainer.querySelector('.background')).toHaveClass('background--error')
+  })
+
+  it('asserts decorative container and layers are aria-hidden', () => {
+    const { container } = render(<Background />)
+
+    // The main wrapper should be aria-hidden since it is decorative background
+    const wrapper = container.querySelector('.background')
+    expect(wrapper).toHaveAttribute('aria-hidden', 'true')
+
+    // Confirm that the decorative internal elements exist as well
+    expect(container.querySelector('.background-grid')).toBeInTheDocument()
+    expect(container.querySelector('.background-scan')).toBeInTheDocument()
+    expect(container.querySelector('.background-lines')).toBeInTheDocument()
+  })
+})