diff --git a/frontend/src/components/UserCard.test.tsx b/frontend/src/components/UserCard.test.tsx
new file mode 100644
index 0000000..57de0fe
--- /dev/null
+++ b/frontend/src/components/UserCard.test.tsx
@@ -0,0 +1,69 @@
+/**
+ * Focolari Voting System - Test UserCard Component
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { UserCard } from './UserCard';
+import type { User } from '../types';
+describe('UserCard Component', () => {
+    const userAmmesso: User = {
+        badge_code: '0008988288',
+        nome: 'Marco',
+        cognome: 'Bianchi',
+        url_foto: 'https://via.placeholder.com/150',
+        ruolo: 'Convocato',
+        ammesso: true,
+    };
+    const userNonAmmesso: User = {
+        badge_code: '0000514162',
+        nome: 'Giuseppe',
+        cognome: 'Verdi',
+        url_foto: 'https://via.placeholder.com/150',
+        ruolo: 'Tecnico',
+        ammesso: false,
+        warning: 'Utente non ammesso al voto',
+    };
+    it('should render user name correctly', () => {
+        render(<UserCard user={userAmmesso} />);
+        expect(screen.getByText(/Marco/i)).toBeInTheDocument();
+        expect(screen.getByText(/Bianchi/i)).toBeInTheDocument();
+    });
+    it('should render badge code', () => {
+        render(<UserCard user={userAmmesso} />);
+        expect(screen.getByText(/0008988288/)).toBeInTheDocument();
+    });
+    it('should render role', () => {
+        render(<UserCard user={userAmmesso} />);
+        // Il ruolo 'Convocato' non è nei colori predefiniti, usa default
+        expect(screen.getByText(/Convocato/i)).toBeInTheDocument();
+    });
+    it('should show AMMESSO status for ammesso user', () => {
+        render(<UserCard user={userAmmesso} />);
+        expect(screen.getByText(/AMMESSO/i)).toBeInTheDocument();
+    });
+    it('should show NON AMMESSO status for non-ammesso user', () => {
+        render(<UserCard user={userNonAmmesso} />);
+        // Ci sono due elementi con "NON AMMESSO", usiamo getAllByText
+        const elements = screen.getAllByText(/NON AMMESSO/i);
+        expect(elements.length).toBeGreaterThan(0);
+    });
+    it('should show warning message when user has warning', () => {
+        render(<UserCard user={userNonAmmesso} />);
+        expect(screen.getByText(/Utente non ammesso al voto/i)).toBeInTheDocument();
+    });
+    it('should render user photo with correct alt text', () => {
+        render(<UserCard user={userAmmesso} />);
+        const img = screen.getByRole('img');
+        expect(img).toHaveAttribute('alt', 'Marco Bianchi');
+    });
+    it('should apply success border for ammesso user', () => {
+        const { container } = render(<UserCard user={userAmmesso} />);
+        // Verifica classe border-success
+        expect(container.querySelector('.border-success')).toBeInTheDocument();
+    });
+    it('should apply error border for non-ammesso user', () => {
+        const { container } = render(<UserCard user={userNonAmmesso} />);
+        // Verifica classe border-error
+        expect(container.querySelector('.border-error')).toBeInTheDocument();
+    });
+});